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Creating a 3D environment as the 
basis fora series of rising rollovers 
and buttons. 


Storing data using XML means you 
can concentrate on the aesthetics. 


How to convey information 
using compelling interactive 
presentations or manuals. 


44 
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What if you could build a script 
engine into your movie to change 
the dynamic content? Here's how... 


Tips from the experts on key 
aspects of Flash, ActionScripting, 
animation and more... 


Expand on point-and-click with an 
innovative interface that doesnt 
rely on the hyperlink method. 
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Making the sound quality of your 
movie as good as the visual. 


Create the illusion of gravity using 
graphics, frames, a scrollbar and 
of course, ActionScript. 


Modify sounds, graphics. Flash 
symbols and tables dynamically, 
even in finished output files. 
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for producing high-impact 
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Streamlines the authoring process 
with centralised, automated 
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manage assets and create content 
for low-bandwidth delivery. 
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automatically delivering dynamic. 
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graphics whenever you choose. 
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Create a tower 


block navigation 


You don't have to spend a fortune on 3D 
packages to create interactive environments — 
we'll show you a cheaper and easier way... 


ne of the most important 
( 8 things that you notice when 
visiting a new Website is the 

. ease of use. Much of this 
depends on how deceptively simple the 
navigation system is. The challenge for 
designers is to combine intuitive 
functionality with an element of 
originality and style. And one way of 
achieving this is to use a 3D environment 
as the basis. 

The focus of this tutorial is to take the 
city 3D blocks element from the cover 
illustration and show you how to create a 
series of sliding and rising rollovers and 
buttons. We'll also show how to develop 
the skills picked up here to create a 3D 
navigation system. 

We've created the 3D elements in this 
tutorial using the Perspective tool in 


FreeHand Yand a two point perspective 
grid. This prevents any ‘forced’ 
perspective that might occur when using 
an application like 3ds max. With the 
advent of programs such as Swift 3D, it’s 
now a lot easier to make 3D Flash 
animations, but file sizes are often an 
issue. By using this simpler method to 
create the city, you'll be able to keep the 
final animation down to about 9K. > 
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Part 1: Animating the blocks 


These steps take you through the process of building the animation and 


rollovers that make up your navigation system 


Building elements 
in FreeHand 


A lot of Flash work starts life as 
vector elements in FreeHand 9. 
Two important tips to remember 
when creating Web elements to 
export into Flash are to make 
sure the FreeHand document and 
Flash movie have the same 
dimensions (which saves 
awkward repositioning later). 
Also, it's a good idea not to paste 
anything inside another object 
because the cropping effect this 
has in FreeHandis lost once 
taken into Flash. 
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fe Open a new Flash movie and set the following 
properties: 12fps, 640x480 pixel movie size, 
white background. Import the file blocks.swf on the 
cover CD. Select the front seven blocks and place on 
a new layer. Call this layer split_tower and name the 
other layer back_tower. Select everything on 
split_tower layer and press F8. Create a Movie clip 
called split_tower_mov and give it an instance name 
of split_tower. Double-click on this symbol to edit. 


i : 
Click on the open_close_button layer, 
keyframe 1 and press F6. Break this block back 
to fills and change the colours to match the other 
four blocks and the rollover state of 
open_sp_tow_button. Insert a keyframe at 24 and 
make this a new button called close_sp_tow. 


Click on the keyframe and create a shape 
motion tween (to make this smoother, set this 
tween to 100 per cent easing out). Test. At this 
point it looks like a new block separated from the 
large block or a mess of flashing tweening triangles. 
If this happens, your original FreeHand file may 
have been untidy. Use the shape hints to force the 
tween to work. To add a shape hint, press Control/ 
Command+Shift+H, insert a keyframe at 24. 


Select all the blocks except the one used in the 
animation and copy to a new layer. Call this 
layer dormant_blocks, insert frames to 45 and lock 
the layer. Rename the other layer open_close_ 
button. Select the block on this layer, press F8 and 
create a button called open_sp_tow. Double-click to 
edit the new button. Break the objects to fill shapes. 
Press F6 to put a new keyframe in for the rollover 
state. Change each facet of the block to the Over 
state colour, in this case dark orange (FF6600), mid 
orange (FF9900) and light orange (FFCCOO). 


Double-click to edit this button as before. This 

time, the rollover colours are dark yellow 
(FFCCOO), mid yellow (FFFFOO) and light yellow 
(FFFF66). Leave the hit area for now because you'll 
modify this later. Move animbutton4 layer, 
keyframe 1 to 2 and break apart. Add a new 
keyframe to this layer at 7 (five frames on). 


8 | Show layer animbutton3 and drag the block 
keyframe to 13. Copy frame 23 (the final 
position of block four) in animbutton4 layer to 
frame 7 (the starting point of block 3) in 
animbuttons layer and then lock layer animbutton4. 
Insert a motion tween as before, making sure the 
start and end position blocks are filled shapes rather 
than symbols or groups. Test the tween again, 
adding shape hints if needed. 


oe ad 
Return to split_tower_mov and insert a new 
layer. Import the first stage of the animation's 
Up state — sp_t_stage1.swf (four orange blocks). 
Copy these four blocks on to their own separate 
layer and name them animation button 1 to 4, from 
the top downwards. 
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G At this point, it's easier to hide the top three 
layers. Copy the orange block from the 
open_close_button layer and use it to replace the 
block in the first keyframe on animbutton4 layer. 
Now lock open_close_layer. Remove enough of the 
block to give approximately the same dimensions as 
the other thinner blocks, using the Straight Line 
Lasso tool (this doesn't need to be too accurate but 
try to keep with the perspective). 


9 | Add keyframe at 24 and copy this shape to the 
next layer as before, moving each tween five 
frames on every time. On the final layer, the tween 
should end on frame 23, so insert another keyframe 
in 24. You should now have all four blocks rising in 
sequence. Convert the blocks in keyframe 24 on 
layers animbutton1 and animbutton4 to buttons 
sp_tow_button and sp_tow_button4. Set their 
40Over state colours to the yellows used in 
close_sp_tow button. 


Colour values 


For easy reference, here are 
the colours we're using in 
this tutorial: 


Orange - dark FF6600, mid 
FF9900, light FFCCOO 


Yellow - dark FFCCOO, mid 
FFFFOO, light FFFF66 


Red - dark 660000, mid 
990000, light CCO000 


On layer animbutton2, import the file 

sp_t_right.swf. Select both of these blocks and 
press F8 to convert it to a Movie clip called 
slider_mov, with an instance name of slider_mov. 


As in the split_tower_mov, the block needs a 

return anim. Eventually this will have two 
possible closings. So the first return animation, 
which will be on press of the sliding block is as 
follows: add a new keyframe in frame 8 and convert 
this to a button slider1_close_button and an add 
action ‘press, play’. Add another keyframe in frame 
9. Break the button back to fills and change its 
colour to the yellow palette and the final position to 
the orange palette. 


Return to split_tower_mov and click on layer 
animbutton3, frame 24. Import the file 
sp_t_left.swf. Select both of these blocks, press F8 

and convert to a Movie clip called slider_mov2. 
Repeat steps 14-18, making sure to use 
sp_tow_button3 for the open button, and 
slider2_closed for the close button with the frame 
label down2. 


Double-click to edit this movie. Copy frame 1, 

layer 1 into a new layer called slideout1 and 
move it to frame 2 in the timeline. Name the bottom 
layer open_close_buttons. Convert the block on this 
layer to a button called sp_tow_button2, make the 
rollover the yellow palette and assign the action on 
mouse press to ‘play’. On layer slideout1 add a new 
keyframe five frames on. 


For the second return anim (which is on two 

other button presses) add a new keyframe in 
frame 20 and copy frame 7 into it. Add a new 
keyframe in 25 and copy frame 2 into it. Set the 
tween as before, remembering to set the easing to 
-100 per cent, and adding hints as needed. 


Cl 
ya Return to split_tower_mov. Insert new 
keyframes at 25 in all layers, except 
dormantblocks. Now make the tween anims again, 
on the animbutton layers. Remember to do these in 
reverse and in reverse order. Set the easing to 
-100 per cent, remembering to break the buttons 
into fills! Break the sp_tow_close button apart in 
frame 25 and insert frames to the end of the other 
layer animations. Now insert a new layer at the top 
called actions. Put in stop actions at frames 1 and 
24, In frame 45 put the action ‘goto’ and 
‘stopframet'. This is the split tower animation. 


Remove the back block in frame 7 and the 

front block in frame 2. Now change the block 
in frame 2 for the yellow palette. Insert a shape 
tween as before, test the tweens and add shape 
hints as required. 


i 

Insert a new layer called actions. In frame 1 
and 7 add ‘stop’ action, in frame 14 add ‘goto 

and stop frame’ action, in frame 20 add a label 

called ‘down’ and in frame 25 add the action ‘tell 

target_root.split_tower to play’ and then ‘goto 

and stop framet’. 


Go back to the main timeline in scene 1. 

Select all on layer back_tower, press F8 and 
make a Movie clip called back_tower_mov, giving it 
an instance name of bk_tower. Double-click to edit 
the movie. Separate the blocks into three 
layers. Leave the five on the left on the base layer 
and call this dormantblocks. Insert two layers, name 
the middle layer open_closebuttons and the top 
layer dormantblocks2. Copy the back-right block to 
open_close layer and the final (front-right) block to 
dormantblocks2. > 
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Convert the block on openciose layer to a 

button named back_open_button with the 
Over state in the orange palette. Insert keyframe 2 
at 15 and import the file bt_active.swf. Tween as 
before, using hints where needed. 


Add another keyframe at 16 and convert the 


block to a button called back_tower_close. Set 


the mouse press action to ‘play’. Add a keyframe at 
17 and break back to fills. Copy frame 2 into a new 
keyframe at 30 and insert a shape tween between 
frames 17 and 30, with -100 per cent easing. 


Insert a new layer called actions and set the 

following scripts: frame 1 ‘stop’, frame 16 
‘stop’ and frame 30 ‘goto and stop frame1'. Return 
to the main timeline and test the movie by 
exporting. Now that all the Movie clips are in place 
and all have instance names, you can add the code 
to the final movement. 


Part 2: Adding the movement scripting 


This gives you advanced working buttons that talk to each other 


Application of the 
animation 


This animation can be applied to 
a site in many ways. By using the 
cityscape from the illustration as 
a starting point, it forms some 
kind of interactive map. The other 
obvious solution is a navigation 
system based around an actual 
building. To see this in action, 
visit our site for Lara Croft 
creators, Core Design — 

[w] www.core-design.com. 


ig Double-click on split_tower_movie and click 
once on the open_sp_tow button. It already 
has an action to tell it to play the split_tower_mov 
on press, but to avoid the blocks being in their Up 
states together you need to add some more script. 
Using the ‘if’ and ‘current frame’ statements, you 
can tell the back_tower_mov to close if it is open by 
using the scripting as above. This tells the 
back_tower_mov to play if it has played to frame 16 
(it's Up state) which closes the tower back down. 


- 


a Using the same principle, you can close the 
split_tower_mov if it is open. Click on the 
close_sp_tower button (frame 24). Because this 
movie has other movie clips inside itself, you need 
to assign extra conditions to take their state into 
consideration. If the first two ‘if’ conditions say that 
if either slider_mov is active (such as in frame 11), 
return it to its Down state. These movie clips also 
have the script in them to close the main 
split_tower_mov. When neither of these movie clips 
are in use, you need to set a final condition to say 
what happens. This final condition simply says that 
if both slider movie clips are in their Down state, 
play the split_tower_mov. By the way, although this 
script is inside split_tower_moy, it actually sits in the 
main timeline. This is why it needs the addition of 
the ‘_root.' prefix. 


Copy all the code you have just used and 

open back_tower_mov. On the 
back_tower_button in frame 1, paste all this code 
into the actions box. With a few quick alterations, 
this does exactly the same as in the 
split_tower_mov. The only script that needs to be 
added tells Flash where to find the Movie clips, 
which can be done by adding ‘_root.' before each 
instance name in the conditions. It also needs to tell 
the split_tower_mov to close if none of the slider 
clips are in use, but it still is. A single extra clause in 
the final ‘if clause’ solves this problem. 


Part 3: Final touches 


Finish off your animation by giving it a polished look and feel 
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You may have noticed that when you click to 
open one of the sliding panels, it immediately 
highlights the button beneath. This can be altered 
by adjusting the hit areas of the buttons so that 
none overlap. Double-click the sp_tow_button2 in 
the split_tower_mov, double-click on the ‘hit’ 
keyframe and press ‘f6' to insert a keyframe. Now 
you can remove the overlap using the Lasso tool. 
Do the same to all other buttons in the tower by 
making the hit areas more specific. Problem solved. 


To make the animation smoother, you can 
insert more frames in the tweens. 


| 3 | to one of your choice, in this example CC0033. 


Finally, you can modify the background colour 
With a few more actions added to the buttons (for 
example, ‘load movie’ or ‘get url') and some text, 


you can create your own custom navigation system. 
Now it's time to experiment! EEE 
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Integrating 
Flash and XML 


Storing data using XML means you can 
concentrate on the functionality and 
aesthetics of your Flash movie 
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= ith the release of Flash 5 


j came a host of new and 


exciting features. Some of 
the new features struck fear 
into the hearts of designers while 
warming the cockles of developers. XML 
was one of those features. In this tutorial, 
we give a designer’s guide to XML and 
show how it can save time and effort. 

XML is an extremely useful way of 
storing and retrieving data, enabling you 
to separate content from structure. It 


means that you can concentrate on the 
functionality and aesthetics of your Flash 
movie. Every time your client wants the 
copy changed, just fire up BBEdit or Note 
Pad and you're away. In this tutorial we 
produce a single ActionScript function 
to interpret the XML data, build the 
interface and add the content. 

We assume that you are familiar with 
some aspects of Flash and ActionScript 
and also fairly comfortable using the 
Actions window in Expert mode. 


Part 1: The content 


Creating a ‘well-formed’ XML document 


Filing cabinets 


It's helpful to visualise an XML 
document as a filing cabinet. 
Think of the child nodes as the 
drawers on the filing cabinet, and 
their child nodes as folders 
within the drawers. With XML 
you can go as deep as you 


<tutorial> 
<intro> 


require, folders within folders 
within folders and so on, 


The first node of the XML document reminds 

you (and the Flash movie) what the content in 
the child nodes refers to. Open a Text editor and 
type <tutorial>. Hit Return and then tab in so that 
it's easier to see what you are doing. After this, 
come our section headers. These are the child nodes 
of <tutorial>. The first section is going to be the 
intro, so add <intro> to your document, hit Return 
and tab in again. 


<tutorial> 
<intro> 
</intro> 

</tutor iat} 


You'll notice how similar XML looks to HTML. 

The biggest difference is that the tags don't 
describe how the document should look, only what it 
should contain. Note that all tags in an XML 
document need to be closed. If you forget to close a 
tag, you'll get very unpredictable results. So let's 
close these tags now. Type </intro>, Return and add 
</tutorial>. Although it has no real content, we now 
have what is known as ‘well-formed’ XML. 


<tutor ial> 
<intro> 
<p content="Hello World" /> 
</intro> 
</tutorial> 


Next come the content nodes. Between the 

opening and closing intro tags, type <p 
content="Hello World” />. Here we've added an 
attribute to the node - the node name is ‘p' and the 
content attribute of ‘p' is “Hello World”. The ‘/>' at 
the end of the line is actually the closing of this tag. 
Below it, add <newline /> which is the only 
specially-named tag used in this tutorial. All other 
tags can use whatever name you wish. At this point 
it's probably best if you open the content.XML file 
on the CD and use that. 


Part 2: The structure 


Getting Flash to interpret the data from our XML document 


= new 
aM. Leage "content xml" i 


Line 4ofa,Colt 


G The first step to using this data is creating an 
XML object. Open the file XMLtutorial_start. 
fla on the CD. On the main timeline, you'll see a 
layer called ‘actions’. Double-click the first frame of 
this layer to bring up the ActionScript Editor 
window. Type contentXML = new XML();. 

This line uses ActionScript XML constructor to 
create an empty XML object. To load your XML 
document into this object, type underneath 
contentXML.load(“content.xml”); 


Now that the contents of <tutorial> are stored 

in the holding array, we can loop through this 
information a node at a time. Remove the trace 
command from the function, and in its place, add 
for (i=0;i<holding.length;i++){. This sets up your 
loop. In plain English, this line roughly translates as: 
create a variable called i with a value of 0, keep 
looping as long as the value of i is less than the 
length of the holding array, and after each loop add 
1 toi. 


O% 
ten ere. Tirstoni id. ch) idNodes; 
Snotding= "#hoiaing)s 


ontentXML .onLoad = sor tLoaded; 


There is now an XML object in your Flash 
movie that contains all the data in your original 
document, but at the moment it isn't really doing 
anything. The next thing is to create a function to 
read this data and do something with it. Type in: 
function sortLoaded(){ 
holding = new Array(); 
holding = contentXML.firstChild.childNodes; 
trace(“holding="+holding); 
} 
Here, you have created an empty array called 
‘holding’. Fill ‘holding’ with the child nodes of 
<tutorial>. You don't want this function to run until 
the document is fully loaded, so use the line 
contentXML.onLoad = sortLoaded; 


.button..visible = false; 
items = new Arrayd); 


function sor tLoaded( }{ 
holding = new 


Rirroyt 5 
holding = contentxML.firstChi id.ch/ idtedes; 


for (i=0; i <hotdi 
if ChoidingLi 


«length; i++ t 
Cnedetiame |= null) 


u 
ontentXMiL .onLoad = sor tLoaded; 


Flash is still able to treat the data in the holding 

array as XML. This means you can still access 
XML properties such as nodename and attributes. 
One curiosity about XML is that a line break counts 
as anode. To ensure that the code only deals with 
the nodes already created, do a simple check. On 
the next line, add if (holding[i].nodeName != null){. 
Any node that is not explicitly named in the 
document has a nodename of null. 


Taing= 
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<newtine /? 

<p content**Pixetaurgeon” uri="http://eee.pixelauregeon.con” /> 
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<p content="Computer Arts” uel*"httor//eww, computerarts.co.uk™ /> 
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<p content="? 


If you test the movie at this point, you get the 

output window pop-up with the message 
“holding=" followed by the contents of your XML 
document. Notice that your nodes are separated by 
commas. This indicates that each child node is now 
an array element. 


Now that you have set up a loop and added a 

condition to exclude empty nodes, you are 
ready to start using the XML data to build an 
interface. The XMLtutorial_start-fla file has got a 
window and a menu with one button already in 
place. These two movie clips are all you need to 


build your interface. > 
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Part 3: Building the interface 


Using just two movie clips to create as many windows and menu items as necessary 


File size 


Using the techniques outlined in 
this tutorial, you can make 
massive savings on file sizes and 
download times. The tutorial swf 
weighs in at just 26K. If we had 
built this mini-site with the text 
typed directly into the window 
text fields and a separate window 
for each section, we would have 
been looking at three to four 
times that. 


Leda 
te rw 
K*-re0t."+holding| |} nedatiomee ot") = new TL (hotdingl i] chi Later); 


enventime .onkead » sor tonted 


a The first line of code in your loop creates 
anew XML object with the section header 
as part of its name. This ensures a unique name 
that you can refer back to later. Type in 
eval(“_root."”+holding[i].nodeName+”XML") = 
new XML(holding[i].childNodes);. 

You might like to add trace(“line="+"_root.”+ 
holding[i].nodeName+"XML"); which names the 
output window after these objects. 
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Back in the loop, add the next six lines shown 

in the window above. The first five of those 
are for positioning the new window. The last one, 
windows. push(holding[i].nodeName+" window"); 
adds the name of this window into the windows 
array created in the previous step. That's all that is 
required for the creation of the windows, so now 
we'll create the menu. 
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Now to build the windows. Add these 

lines, which duplicate the window movie 
clip and put the node name into its title bar: 
duplicateMovieClip(“window" ,holding[i].nodeNa 
me+"window”,_root.depthStart); and 
eval(holding[i].nodeName+"window.title”) = 
holding[i].nodeName;. Remember that we are in a 
loop here, so this is going to happen for every 
section header found. 
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The method for creating the buttons is almost 


identical to the way in which we created the 
windows. The only major difference is that you are 
giving each button an id number. This is so you 
know which button has been hit. For now, also add 
the line _root.depthStart = _root.depthStart + 1; 
and close the ‘if’ and the ‘for’ statements. 


— 
eleing = Contentint /ipstontia.eni teadeay 
[Pp stra pe 
1 thoidingt i fo ule 
Ta cots anotaing|| }omoeatonte i+) « ee 2R.Chot ding} hice, 
FORE ie 2 
enalaingts ei 
SSttnotaingts | meow alnaen sities) = netaingl nebaonas 


TE arkoed © sor tLonded; 


At this point, you need to initialise a few 

variables. At the start of your function, add 
previousX =160; previousY =0; preButtonY = 21; 
and id = 0; -. These act as start values for 
positioning your interface elements. You are also 
going to set some up outside of the function to refer 
to later. Under the contentXML.load command, add 
windows = new Array(); depthStart = 10; 
menu.button._visible = false; and menuitems = 
new Array(); 


G This means you can now run the movie for 
testing purposes and see how your interface is 
coming along. Go to Control>Test Movie to see the 
menu. Click on the menu buttons and you should 
see something like the picture above. 


nen 


Part 4: Getting the content 


Reading the XML attributes and adding to the temporary array 
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Pt] Back in Part 3.1, you added a line to create 
individual XML objects for each section. This is 
where those objects come in. Above the 
_root.depthStart line, add tempArray = new 
Array();. This creates a temporary array that you can 
keep repopulating. Every time this line is executed 
within the loop, it clears the array. 


Next add tempArray = eval (“_root."+ 

holding[i].nodename + “XML.childNodes”);. 
This takes the child nodes of the section XML 
objects created earlier and places them into the 
temp array. Basically, you're stripping down the 
original XML file into its component parts. 


lLine= _root. introXfl 

‘eapAirray= 
rySp content"Hi, this is roughly what the end result of the tu 
vy Snewting />,, 
+SP content="If you want to see what the XML that builds this 


++<D content="click here.” url="content.xml" />,, 
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Line= root, bookmark sXtiL 
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You can use another trace command here to 
see exactly what is going on to help visualise it. 
Add the line trace(“tempArray= “ + tempArray); 
and Control>Test Movie. Your output window will 
show you the contents of tempArray for each cycle 
through the loop. 


Going further 


If you know a little about ASP 
and databases, you could easily 
transform this Flash movie into 
one that is editable online. Add a 
password and log-in feature and 
you can have hundreds of 
individual Flash sites running 
from this one file. It could even 
be turned into a Flash blogger or 
online public bookmark site. 
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| 4 | You need to set up another loop within the 

main loop to cycle through the contents of 
tempArray. Add the line for (j = 0; j < tempArray. 
length ; j++ ){ to initialise the loop. 
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Next, check that the node name isn't 

“newline” and that it also isn't null with this 
line: }else if (tempArray[j].nodeName != null && 
tempArray[j].nodeName != “newline”){. This way 
you know that you aren't dealing with an empty 
node, and you know that it isn't a newline. 


10 You can also set yourself a flag: urlVar = true; 
Flagging is simply a way of keeping track of 
whether something has occurred or not — usually 
one of only two possibilities, which is why it has a 
Boolean value. If you don't find anything in the url 
attribute, set the flag to false using: }else{ and 
urlVar = false; 
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G The first thing to do in your sub loop is check 
to see if the node name is your reserved node 
name “newline”. Add the line if(tempArray[j]. 


nodeName == “newline” ). If it is, then add a 
double line break. 
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Now put an ‘if’ statement inside your 

‘else if’ giving further conditions. The first one 
being if (tempArray/j].attributes.url.length > O){ 
which checks to see if there is anything in the 
node's ‘url’ attribute. 


oO Finally, add the lines that add the content. 
These lines are so long that you'll have to open 
the actionscript.txt file on the CD to look at them. 
They are almost the same except for one small 
difference. The first one, executed if your urlVar flag 
is true, contains HTML to change the font colour 
and link the text to your url. 


To do this, type in an eval command to take 
the value of the variables in the brackets: 
eval(holding[i].nodeName+"window.content”) 
=eval(holding[i].nodeName+" window.content” )+ 
newline+newline;. Add “window.content” onto 
the end - it then treats this as a path. So this line 
takes the contents of a window and adds two line 
breaks to it. 
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[9 | If the url attribute contains something, then 
you need to store the contents somewhere. 
Here, use a variable called urlHolder: urlHolder = 
tempArray[j].attributes.url;. This way, you can refer 
to it later. 


Now that your script is complete, Control>Test 
Movie, and you should see something along 
the lines of the picture above. It's also worth having 
a play around with the XML file. Add your own 
sections and content and see what happens. EEE 
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E-CARD RECORD €-CARD 


Rom and son's creation of games and Flash 
shorts for Guinness World of Records shows 
both aspects in action. 
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rom and son 


Immersive trickery on CD, online, or on location is the speciality of 
London design outfit rom and son, who advise: “Interactivity is 
what's unique about Flash — use it...” 


ust as breakthroughs in special effects 
( technology have consistently raised the 
, expectations of cinema spectators, 

" advances in Web technology have bred 
generations of users much more conversant with the 
language of interactivity. 

While virtual reality, holo-decks and Vurt feather 
trips into immersive fantasy worlds still belong in the 
dreams of sci-fi writers, there's no doubt that the 
boundaries of interactive entertainment are going to 
be constantly probed both on the Web and in everyday 
life. One company that knows more than most about 
designing with interactivity in mind is rom and son. 

Though officially formed in 1999, the company’s 
directors have worked together since 1995 as founders 
of the Antirom collective, whose antirom CD, released 
over five years ago, was a new media landmark, and 
now a collector’s item. In addition to recent work for 
clients such as IBM, Benetton, Paul Smith, and the 
London Science Museum, rom and son has just 
released a follow-up CD showcasing its occasionally 
surreal but always technically adept interactive output. 

Not least because it features a few 
Director-programmed ‘doodles in sound’, the rom: one 


CD has the feel of a music release. The permanence of 
the CD medium, as opposed to the evanescence of the 
Web, is a major attraction for rom and son: “As such, 
rom: one represents for us the cliche of the difficult 
second album,” explains Joe Stephenson, rom and 
son's co-founder. “It’s slicker and more accomplished 
than the antirom CD, and rom: one represents our 
maturing as interactive designers alongside that of the 
media we work in.” 


Out and about with Flash 


The company’s work is extremely varied in scope, and 
its portfolio stretches from a games microsite for the 
Guinness World of Records, through a 13-episode 
French-language interactive comic strip called Reality 
Police for Alphanim Digitale, all the way to an 
installation at the London Science Museum which 
enables users to create and sequence music via 
touch-screens. 

Remaining true to the company’s credo of blurring 
the division between interface and content across 
such a variety of media and settings requires a design 
approach with clear and intuitive interaction as its > 


rom: oneCD launch 


The latest CD release from rom and son, rom: one is 
divided into three sections — sound, games and 
stories. The sonic offerings include Phase, a sound 
sequencer with minimalist overtones which grants the 
user control over the lengths of sequences to create a 
stepping, phased effect. Projection is another sound 
toy inspired by Zimbabwean thumb piano music of all 
things, and is based on the interaction between 
animating rectangles and loops of different lengths. 
Globe experiments with decaying delay effects; users 
take visual cues from a rotating sphere on to which 
notes are placed. Games on the CD include Airplane, 
a Tapper-esque race against time where you controla 
hostess trying to fill a plane before take-off. The 


design resembles online classics mobilesdisco and 


netbabyworld. Finally, in the story section you'll meet 
Sidney, a disturbing one-eyed existential feline with 


more than mice on his mind. 
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guiding principle. It also calls fora certain measure of 
restraint. “On any platform other than the Web, be it 
CD-ROM, in-store kiosk, or museum installation, the 
pressure to keep bandwidth down is reduced 
compared to Internet-delivered products,” asserts 
Joe. “With Web toys and games we're routinely given 
very low memory size targets to stay under, whereas 
this doesn't happen with content for other platforms. 
That's not to say though, that when the platform is a 
disc rather than the Web we breathe a sigh of relief 
and go mad with unnecessary graphical shash — far 
from it,” he adds. 

Flash and Director are rom and son's mainstay 
design tools, with Flash selected when a project calls 
for complex animation and simple interactivity. Where 
more complex interactivity is concerned, Director's 
more developed programming environment facilitates 
speedier results. 

Some projects call for both, and the company has a 
number of these hybrid projects in its portfolio; but 
having experienced difficulties in persuading the 
sibling packages to play together nicely, Joe believes 
rolling them into one environment might ultimately be 
the answer. “The biggest pain for us is that Flash isn't 
properly integrated with Director. We can import Flash 
into Director and the Flash animation still works. 
Some of the scripting still functions and some of it 
doesn't, and the sound becomes totally unreliable,” he 
says. “The way to avoid problems is to treat Flash in 
Director as a non-interactive and silent media file, 
like a soundless video chunk.” 

Other niggles with the software include masking 
‘shadows’ appearing on top of scenes with dark 
backgrounds which can sometimes be eliminated by 
changing the background colour, and the erratic 
behaviour of gifs with transparent backgrounds. On 
the whole though, Flash’s intuitive drawing tools are 
seen as a definite plus, and despite qualms about its 
convoluted scripting, the software has served rom and 
son well across an array of challenges, including the 
installation that it created for Paul Smith Jeans, see 
Paul Smith instore installation on page 25. 


Take over TV 


Not surprisingly, a gaze into rom and son's 
touch-screen crystal ball reveals a fully-interactive 
future. The company is busy developing a multi-user 
online game along with more art-based installation 
work. These projects are in tune with what the 
company perceives as its place in the market, bridging 
the gap between hardcore video games and art, 
advertising and design. 

Joe also foresees a shift in the way interactive 


1. An interactive executive toy, created by rom and son for 
Conchango, featuring seed pods which burst open to spell 
out the company’s name. 


2. The company has seen various versions of Flashcome 
and go, but reckons that the latest version's ability to hold 
a variable is the program's most significant recent 
advance in its evolution. 


3. Rom and son created these interactive screensavers at 
[w] http://learningcurve.pro.gov.uk/downloads, as an 
educational aid with interactivity, on behalf of the National 
Archives learning curve Website. 


4. Part of the reason rom and son is releasing its rom: one 
CD is to be remembered. “The ephemeral nature of the 
Internet is one of its charms, as is its immediacy,” says Joe 
Stephenson of rom and son. “But how many cool URLs 
have you forgotten forever?” 


Flash — breaking records, distorting reality 


experiences are consumed, precipitated by the end of The two online rom and son projects mentioned here show the company’s diverse approach to Flash design. The first, Reality 


what he describes as the ‘more is better philosophy’ 
that spawned the current 60 hours of gameplay 
videogame. “| hope and believe that broadband will 
make possible the delivery of serialised interactive 
experiences that take up about half an hour or so of an 
evening, filling the slot in which the socially-capable 
might currently watch a TV programme,” he predicts. 
“This is one of the keys to broadening the appeal of 
interactive entertainment.” EES 
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Police, at [w] www.yafoule.com, is the first full-blown rom and son developed property, targeted at the French youth market. 
The narrative revolves around Officer Green — a reality policeman — whose lot in life is to prevent monsters from distorting 
the boundaries of reality. To take full advantage of the project's online delivery, rom and son ensured that the user had to 
maintain active involvement for the narrative to progress. “Each weekly episode ends in suspense,” says Joe Stephenson. 
“Reality Police is a sketch of what storytelling can become within an interactive network like Web or iTV.” The project took six 
months in total, with a team of 20 people involved in the production at different stages. 

Guinness World Records Daily Wow, at [w] www.guinnessworldrecords.com, is a series of tabloid-style interactive slots 
illustrating amazing tales from the record books created using Flash and streaming video. Rom and son devised template 
designs and a workflow system which enabled it to script, storyboard, draw, animate, create music and program ata rate of 
two stories per day for three months. 
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Paul Smith instore insta | 


The brief for this project was to create a physical interactive installation in Paul 
Smith Jeans. The installation was to increase footfall and generate PR and 
word-of-mouth recommendation 


“A key factor when designing for interaction is the issue of user investment. How much investment has the user made 
in the experience when they come to it? If they've walked to Woolworths and forked out £30 for a console game, that's 
a pretty big investment. If, as in this case, they've come across something they weren't expecting in a public 
environment, they've made no investment in the experience at all. As such we needed to grab and hold the user's 
attention immediately.” 


“The way we do this is by making interaction transparently simple. No instructions, no mouse, no keyboard, just 
onscreen visuals responding to sound level in the surrounding environment. The direct relationship between the noise 
around the user and the onscreen visuals is immediately obvious. The user wonders what would happen if they clapped, 
or shouted, or whistled - they're engaged, it's as simple as that.” 


“The Paul Smith Sound Interactive is a suite of sound toys running on a snow-white Apple iMac, without a keyboard or 
mouse. The only way you can interact with the sound toys is via the built-in microphone input — by shouting or singing. 
The software comprises eight different interactives based around the character of R. Newbold, a workwear brand 
owned by Paul Smith. There are five toys based around the tag line ‘R. Newbold was a very practical man’. Each toy 
shows R. Newbold damaging himself in some way or other. For example, in one toy he is holding a hair dryer very close 
to his head. The hair dryer responds to sound input — the louder the input the harder the hair dryer blows. If you shout 
loud enough, the hair dryer blows R. Newbold's head right off. The remaining three toys are abstract representations of 
sound. They help the user to understand the direct relationship between the ambient sound level in the store and the 
onscreen animations.” 


“We used Flash to make the animations of the R. Newbold character. The character originally appeared as a tiny pixel 
graphic on i-mode phones in Japan, but for the instore installation, we needed big animated versions of the character. 
We used Flash's vector graphics capabilities to create large, bold, scaleable characters that we could animate cleanly." 


“We then put these Flash movies into a Director ‘shell’. We extended Director's capabilities using Geoff Smith's sound 
level extra, (an extra is like an add-on bit of code for Director), to listen to the volume and frequency of sound coming 
into the iMac's built-in microphone. The Director shell then sends instructions to the Flash movie to animate according 
to the sound input level." 


Paul Smith installation had a team of four, though not all working on the project full time. It was completed in a month. 


a 
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Interactive 
techniques 


With the techniques we're about to show you, 
you'll be able to deliver smooth, lightweight, 
interactive animations for the Web in no time 


nteractivity is created 
through the relationship of 
movies, code and button 
events. Using the example 
of this interactive module, you can learn 
how to build compelling interactive 
presentations or informative manuals. 
With this simple step-by-step guide to 
folding a paper aeroplane you can 
interact either by playing the animation 
all the way through, in stages, or jumping 
toa specific loop. This kind of 


interactivity is ideal for highlighting key 
stages in any animation. 

When it comes to instructional 
animations, they should be simple, 
informative and deliver information in 
digestible stages. Users need to know 
where to start, the method and stages of 
production and how to see the result. 

This tutorial shows you how to control 
two movies using buttons linked by 
simple ActionScript, along with various 
fade, morph and loop techniques. 


Illustration: Esther Lamb [e] esther.lamb@futurenet.co.uk 


Part 1: Preparing the stage for your animation 


Combine techniques to create complex animation sequences, using shape 
hints and skewing objects on motion tweens 


Recycling is 
memory friendly 


Take advantage of re-using 
graphic symbols in other parts of 
the movie. In this case, we have 
mirrored some symbols using the 
Modify Transform option to flip 
and rotate objects. Recycling 


symbols saves on vital memory. 
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ee This interface comprises two movies, four 
buttons, two dynamic text fields and a graphic 


background. The first movie is an aeroplane es Create a new movie running at 50fps. On the 3 Draw a background graphic on the lowest 
animation and the second is a template animation main timeline allow two keyframes for your layer running through both keyframes. It is 
showing the folds — both have a drop shadow that buttons and movies, with stop () commands in useful to have a guide layer to align all your objects. 
also animates. each of the frames. Select Snap to Guides in the View menu bar. 


6 | The example animation here is a compound of 


4 For the aeroplane movie you need to make a 5 | Now you're inside the graphic symbol, let your lots of little animations that have been 


graphic symbol that is placed into a movie clip creativity flow. Remember to place crucial synchronized using the timeline. By combining 
symbol, which enables it to be controlled by the stages in your animation which give the viewer shape tweens, motion tweens and static images, a 
buttons. Press F8 and select Graphic Radio button. opportunities to view the details. complex animation can be built. 


9 | The shape hints in your initial keyframe will 
appear red; re-position your shape hints 
making sure they snap to your shape — they will turn 


Following the example of the aeroplane, the 
most basic components are triangles that have 


been shape-tweened. You can use shape hints to 8 | To control shape tweens, press Ctrl+Shift+H to yellow. In the last keyframe, if any shape hints are 
morph shapes. Note, you can only use shape hints add shape hints. When adding shape hints, red they too need to be snapped to your shape, at 
on shape tweens and not motion tweens. place them around the shape in a clockwise direction. __ which point they will turn green for go. > 
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10 If the angle of your shape is too acute, that is, oO Creating perfect loops such as the ‘fly me 
less than 15 degrees at any given point in your section’. The animation is created using a 
shape, the shape hints may not work. If so, youmay —_ motion guide. On the last keyframe, place the 
need to resort to more traditional methods, drawing 


them by hand, frame-by-frame. it adds smoothness to the animation loop 


object a little behind its intended destination so that 


12) Tweening techniques using skew on a motion 
guide adds dramatic perspective. To create a 
skew by hand, use the Rotation tool on the toolbar 
and drag the side anchor points on to the 
highlighted object. 


Part 2: Adding ActionScript to the movie 


Movies wait patiently until you send instructions to them, and then act 
accordingly depending on the command 


Communicating 


with movies 


ActionScript can communicate 
with Movie clip symbols, but not 
Graphic symbols. That's why you 
need to create Movie clip 
containers. By giving a Movie 
clip an instance name you can 


communicate with it 


1 | Place the aeroplane graphic animation into a 

new Movie clip symbol — this acts like a 3 Insert two extra layers, naming one ‘actions’ 
container for your animation. Extend the frames to and the other ‘labels’. In the actions layer 
the exact length of the embedded graphic insert the stop () command into the first frame of 
animation. When you scrub through the timeline, this clip. This ensures the movie is static unless, of 
the animation should only play once. course, you tell it to play. 


| 4 You can target any particular stage in your St 
animation by its labels, starting or stopping an 5 | Insert blank keyframes (using the F7 shortcut) 


animation from the position of the label. This is 
more flexible than using frame numbers, because 
you can shorten or lengthen your animation without 
having to keep changing your script. 


along the timeline at crucial stages in your 
animation. In each of these empty keyframes, add 
labels in succession. In this example it is ‘stage_1' 
through to ‘stage_8'. 
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| 3; Select the first frame in the labels layer and add 
a label by using your Frame Options panel. 
Enter ‘stage_1' into the label text box. When you 
click on the main stage, alittle red flag appears on 
the timeline with your label name written next to it. 


[car TC reat 
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Go In the actions layer, insert a new keyframe at 


the same position below the ‘stage_2’ label. 
Using your Frame Actions panel enter this code. 


f Croot.continuosPlay == true) { 
play O; 


Ise { 
s 


top O; 


The first line of this code will pass text 
information up to the main stage. The rest of 

the code waits for a user to press a button, 

signalling the animation to play all the way through 


should be: 
or to stop at the nearest important stage. 


_root.displayText = “stage “ +3 


Insert the same code in every other keyframe 

that has labels and amend the first line of code, 
increasing the number according to the label, that is, 
in the frame position ‘stage_3' the first line of code 


9 | In the keyframe at ‘Stage_8' insert the same 
code as above, but delete the first line. Write 

this code into the next keyframe: 
_root.displayText = “watch me go” 

In the last frame of the animation, enter the code 

illustrated above. 


Part 3: Transition fades 


For smooth transitions between graphics, fade multiple layers in and out 
using tweened alpha transparency 


Ease on alpha 


Alpha transitions are very 
processor intensive, so be 
sparing when applying it to your 
animation. Avoid using this 
transition on large graphics, 
because it has a tendency 

to flicker. 


You need to make a second movie that 

illustrates what the paper aeroplane would 
look like if it was completely unfolded. This shows 
the top and underside side folds. You're going to 
create smooth transitions using a fade in and out 
effect between the graphics. 


Make four graphics symbols that occupy 
different layers. Name the bottom layer 
‘actions’ and continue up with the next layers, 
naming them ‘background’, ‘template’, ‘underside’ 
and ‘top’. The animation should be 40 frames long. 


4) Select the first keyframe of the Template layer. 
Using the Effect panel, highlight Alpha from 
the dropdown menu and then set the slider to 0. 
Repeat this process on the last keyframe. For a quick 
preview, press Return. 


Place the other graphics according to the labels 

created earlier. Set the underside graphic alpha 
to 0 at keyframe 10, then fade in at frame 20 and 
fade out at frame 30. Do the same for the top 
graphic, starting at 20, fading in at 30 and out at 40. 


The background graphic should span through 
the entire animation. Place the template 
graphic in the template layer. Add a motion tween 
by selecting the Frame panel and highlight motion 
tween from the dropdown menu. Press F6 to add 

keyframes at frames 30 and 40. 


Using the Frame Actions panel, insert the 
following code into frame1: 
root.displayText = “"; 
and write in this code for the following frames — 
frame 10: _root.displayText = “template”; stop (); 
frame 20: _root.displayText = “underside” ;stop (); 
frame 30: _root.displayText = “top side”;stop (); > 


Flash Special} 29 | 


arts 


Part 4: Naming instances and dropping shadows 


Animated drop-shadows can enhance the depth and space of flat vector graphics 


Highlight the aeroplane movie in frame 1. 
au Create a new layer on the main timeline and Using the Instance panel, give the aeroplane For a cool drop-shadow effect, make a 


place your aeroplane movie in the first movie an instance ‘name’ by entering ‘aeroplane’. duplicate of the aeroplane movie clip giving it 
keyframe. On the second keyframe, create a blank Give the folds movie in frame 2 an instance name of — an instance name ‘aeroplaneShadow'. Change its 
keyframe by pressing F7 and drop your folds movie ‘folds’. By giving movies instance names you can colour and place it underneath the ‘aeroplane’ 
on to the stage. communicate with them. instance; do the same for the fold movie. 


Part 5: Adding scripts to buttons 


True or false statements in buttons help to decide 
the behaviour of your movie 


Coding faster 


Make writing code quicker by 
copying and pasting similar code. 
Use Ctrl+T to check the syntax 
for any errors. Coding in Expert 
mode uses substantially less 
code and its syntax gets to the 
point more directly. 


1 | You are going to write five different scripts To create a button, press F8 and select the 

that contro! your movie in different ways. The Button option. Make rollovers subtle but The buttons in layers 1, 3 and 4 span two 
buttons send data to the movie made in Part 2. clear. Drag this button on to the first frame of the keyframes. The button in layer 2 occupies two 
Using true and false statements and labels, you can main stage and duplicate until you have four separate keyframes. This is because it will contain 
define the behaviour of your movie. buttons on separate layers. two different actions on each keyframe. 


SS a 


‘gotoandstop (1) 
~root. battonTe 


Coress> { piowicse 
~reot-continuosP lay = false; rollover 

Treot aeroplane. play O sie 
cet ee a root. displaytext = ""; 
Trost aeroplaneshadew.play O: root: buttontext="Fo lds" 


p ress) 
pt 33; 


True or False! You want to tell your aeroplane 


4 | Select the button in the first layer and open movie whether it needs to play continuously 

the Object Actions panel and enter this code. or stop at stages. This is achieved by stating G Select the button in the second layer, first 
The script below plays the movie in stages. The _root.continuosPlay = true. The movie created in keyframe, and enter this code. The script 
aeroplane movie evaluates whether Part 2 checks to see what state _root.continuosPlay makes the play-head go to the next keyframe where 
_root.continuosPlay = false; in this case it will stop. is in. False stops the movie. the ‘folds’ movie plays. 
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—root.displayText = “"; 
root. buttontexts" Folds" 


COLOANESTOR CLD. 
root. buttontext="Play movie" 


(press) { 
—root.continuosPlay = true; 
—root,aeroplane.play ©; 
root. aerop]aneShadow. play O; 


pn (press) { 
root.paperFolds.playQ; 


gotoandstop (1); 
—root.displayText = ""; 
root. buttonText="Fly me" 


pn (press) { 
~root.continuosPlay = tr 
root. aeroplane. potoand lay “stage_8"); 
root, aeroplaneShadow. gotoAndP lay ("“stage_8"); 


8 | Place this code (see screenshot above) into the 


Select the button in the second layer, second button on the third layer; this makes the 


keyframe, and enter this code. This controls aeroplane movie play through without stopping 9 | Place this code into the button on the fourth 
the ‘folds' movie. The ‘folds' movie contains stop until the end of the animation. The aeroplane movie layer. The script commands the play-head in 
actions, so the user has to keep pressing the button evaluates whether _root.continuosPlay = True; the aeroplane movie to jump to and play from the 
for the next stage. in this case it plays. position of label ‘stage_8' — ‘Fly me’ animation part. 


Part 6: Displaying text 
Guide the user with written explanations by displaying continuously changing text 


Exporting fonts 


When creating dynamic text 
fields, it's important to consider 
the font you are using: if a user's 
computer doesn't support a 
particular font, the text will not 
display. If you're uncertain, select 
the Embedded Fonts button from 
the Text Options panel to export 
your chosen font outline. 


Create a text field by selecting the Text tool, You need to create another text field to display 
a Dynamic text fields are text boxes that can then click on the stage. Using the Text Options the variable ‘displayText'. When the variable, 

display continuously changing information. A panel, highlight Dynamic Text in the top _root.displayText in your aeroplane movie changes, 
dynamic text field is always associated to a variable. | dropdown menu. Enter ‘buttonText' into the so does the text field on your main stage. Text fields 
The text field prints the contents of a variable. variable box, so this variable is displayed on screen. make invisible variables visible and tangible. 


Part 7: Exporting your movie 


Exporting a movie is a crucial stage for debugging and user testing 


Once you're satisfied with your project, get 
someone else to test it. Watch how users 
navigate your interface noting improvements or 
adding more clarity. Keep in mind when building 
correcting it. Start with your buttons working interactive instructional animation that simplicity 


When creating any project, make sure you 2 | Identifying a bug is usually harder than 
export your movie as often as possible to see 


whether your movie is behaving the way you want. down into your movie so you can identify the 


and usability is the key. This tutorial has covered a 


Remember though, you will overwrite the existing problem. Even experts have to build projects by trial _large range of topics from animation through to 
swf. A handy tip is to Save As at every stage so you and error, continually testing and debugging. This is programming, which will certainly equip you for 
can refer back to your previous stage. as important as any other stage in a project. most interactive projects. FEES 
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A Flash 5 script engine 


Adding and controlling dynamic content in a Flash movie 
usually requires a server-side application. But there is a way to 
do it with standard Flash 5... 


reating a sticky site is hard alternative is to use the ActionScript 
enough, and unless you have command LoadMovieNum to load in 
content that visitors just have SWF’s at run-time. This is convenient but 
to have — a site that remains testrictive, because the commands have 
static each day soon loses its visitors. to be hard-coded. What if the client 
Why go and see something that you've wants to add more than the hard-coded 
already seen three orfourtimes? You commands will allow? 
could update the site every day, but if There is another alternative. What if 
your site is Flash-based this means you could build a script engine into your 
going back to Flash 5 each day, costing movie that loads external scripts at 
time and money. You could always use a run-time, and you could use these 
server side component such as scripts to change the content every day 
Generator, but perhaps your client isn't without having to re-author the main 
willing to meet the extra cost. Another movie? We've got all the answers here... 


Why build a script engine into your movie? 


lexibility! Once you've designed, 
( developed and published your 

Flash movie, that’s it, you can't do 

anything else with it unless you go 
back into Flash. It may be a wonderful piece 
of work but after a while even the best site 
gets a bit boring. You may have designed the 
most perfect interface that can be re-used 
with different content, but to add that 
different content you have to delve into the | 
depths of your Flash code. This is okay if 
you've designed the site and documented the 
code well, but for anybody else, it will be a 
painful experience — even worse if you 
haven't documented it! 

With a script engine, you can build a 
wonderfully complex template and expose 
elements of it to the script engine so that it 
can be populated through a script. This 
makes updating the content a simple matter 
of changing the script — a small step to 
dynamic content. 

The engine and what it controls can be as 
complex as you need it to be. It could be a 
simple animation system, like the one 
presented here, or it could be complex 
enough to control every aspect of the movie. 
Your engine doesn't have to be as powerful as 
ActionScript, but with a bit of thought you 
can build one that enables you to change the 
layout and content of your site without having 
to edit the main movie. Besides, designing 
and developing script engines is fun! 


Designing a script engine 


Developing a script engine is moving a little 
away from the discipline of Website design 
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NIGHTLINE 


and into the realm of software engineering, 
but there is one factor that both fields share: 
before you dive into developing, you need to 
define exactly what you are trying to achieve. 
Therefore, before you can create a script 
engine, you need to decide what exactly you 
intend to script. 

In the example we've used here, we want to 
be able to control movie clips within the 
main movie. We've kept things relatively 
simple because this is the easiest way to 
demonstrate how the engine works. You may 
have other considerations that require 
different keywords. 

With our requirements in mind, keywords 
have been created that explicitly alter 
certain properties of movie clips. These are 
great but there are a few fundamental 
features that have to be added to a language 
to make it useful. These fundamentals are 
variables, flow control and decision making. 
Without each of these, a language simply 
becomes a sequencer. 


The language 


It would be great to go the whole way and 
create a script engine with the grace and 
capabilities of JavaScript or ActionScript, 
but it isn't very practical to try and do this 
within a Flash movie. The movie size and slow 
speed of execution would be far too 
prohibitive! So don't even bother. 

It is far easier and wiser to go fora simple 
solution. The engine presented here 
emulates assembly language — a language 
used to directly program CPUs. Assembly 
language has simple constructs for flow 


What is Nightline? 


Static pages are okay, but after time they will lose their stickiness. It’s time to look at other alternatives... 


WSAL <_root.Ball> <D1> 
NOP 


<_root.Ball> <D1> <D1> 
<_root.Ball> <D1> 


<D1> <2> 
<D1> <20> 
<UpLoop> 


<Start> 


Our final script in the tutorial uses all the keywords 
available in our script language. 


control and decision making. Our language 
consists of the following keywords that suit 
what we need to do for our particular design: 

SET <internal variable D1 - D7> <value to 

place into internal variable> 

CMP <value or variable> <value or variable> 

BEQ <label> 

BGT <label> 

BLT <label> 

BRA <label> 

ADD <variable> <value> 

SUB <variable> <value> 

NOP 

SXY <movie clip name/path> <variable or 

value> <variable or value> 

SAL <movie clip name/path> <variable or 

value> 
All parameters are encased in‘<’ and ‘>’ to 
make them easier to pick out of the script. 
SET enables us to set an internal variable to a 
value. We have seven internal variables 
ranging from D1 to D7. 
CMP enables us to do a comparison between 
the first parameter and the second. 
BEQ branches program flow to a specified 
label if the result from CMP was equal. > 


Create a template in Flash and populate it using a 
script and external movie clips. 
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BGT branches if the first parameter in 
the CMP keyword was greater than the 
second parameter. 
BLT branches if the first parameter in 
the CMP keyword was less than the second 
parameter. 
BRA is an unconditional branch — it will 
happen regardless of the results from a CMP. 
ADD enables us to add a value to an internal 
variable. 
SUB enables us to subtract a value from an 
internal variable. 
NOP literally means No Operation. It is our 
way of letting Flash have some time to do 
what it wants. Without this command Flash 
would devote all its time to executing our 
scripts and slow the movie down. 
SXY means Set X and Y. SxY sets the X and Y 
co-ordinates of the specified movie clip. The 
first parameter is the X co-ordinate and the 
second parameter is the Y co-ordinate. 
SAL denotes Set Alpha. This enables us to 
play around with the alpha property of a 
movie clip. 

We can also define specific points within 
our script called ‘labels’. A label looks like: 

<name of label> 

Labels share the same ‘encasing’ format of a 
parameter, so name them something unique 
so that when the engine searches for one, it 
doesn't pick up a parameter by mistake and 
start program flow at it! 


So how does it work? 


The hardest challenge is loading in the 
script. Thankfully, ActionScript provides a 
keyword called LoadVariablesNumasaway | 
of doing this. All we have to do then is format 
the script in a way that LoadVariablesNum 
can handle. We do this by formatting the | 
script into a string variable and using a 
second numeric variable to check that the 
script file has been loaded. If Flash can 
detect the variable then the script file has | 
fully loaded. 
Formatting our script into a single string 
variable means that we have to be able to 
dissect this string and extract bits from it. 
This involves scanning the string. Fortunately, 
Flash has quite a powerful string object that 
we can use to access any character or 
sequence of characters within a string. | 


Parameter 


Never under-estimate script engines. You might not have realised, but even Lightwave has one! 


Our first stage within the engine is to 
search from the beginning of the string fora 
valid instruction. This is done using a 
brute-force method where we scan through 
character by character. The index in the string 
is incremented by a single character at a 
time, but we pull out three characters each 
scan because the keywords are three 
characters long. We use the string object's 
SubString method to do this. 

Once we have found an instruction, the 
next thing to do is extract any parameters 
that go with it. To help us with this task, we 
make it a requirement that any parameters 
are encased in ‘<’ and ‘>’ characters. Without 
these characters marking the beginning and 
end of a parameter, we would need a 
sophisticated parsing mechanism, which 
would add a greater overhead to our engine. 
The key is to keep everything as simple as 
possible so that the coding requirements are 
kept low and the speed is kept up. 

All that’s left is for the keyword processor 
to execute each instruction. The keyword 
processor is really just a bunch of ‘if’ 
statements, each of them looking fora 


2 3 4 5 


Strings are just a collection of individual characters — each with a unique index. 
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particular keyword. If one of them matches, 
then it executes a list of ActionScript 
commands, passing on the parameters 
extracted from the script. 


What's the catch? 


As with everything, there is a small catch with 
executing the script engine — speed. The 
engine works on strings and we have to parse 
the string to extract keywords, parameters 
and labels. All this takes time. What we are 
doing is getting one interpreted language to 
interpret another language, which as you can 
imagine, slows things down. Pre-scanning 
the string would speed up the engine, the 
objective being to mark the location of labels 
and convert the code into a more compact 
‘compiled’ format. You could go further still 
and build a compiler to compile external 
scripts into a binary format that your 

engine understands. 

One thing we don't do is error check the 
code — we just assume that the script is 
error-free. If error-checking code was added 
to the script engine it would add to the 
execution overhead, which would slow 
everything down. 

The most important thing to remember is 
that Flash will quite happily spend as much 
time as it can executing your script if you tell 
it to. To stop this, and give time to the rest of 
the movie, you have to place the NOP 
keyword at convenient points in your script. 
This keyword releases control back to Flash 
by leaving the ActionScript loop that is 
executing the script. The state of the engine 
is preserved so that when the script begins 
execution again it does it at the instruction 
after the NOP. So now you know the script 
fundamentals, it’s time to try it out. 


Part 1: Setting the stage and the symbols 


Your first task is to set the stage and create the movie clip that you will be manipulating with your script... 


Layers 


Always label each of your layers: 
this makes working on a movie 
easier, especially if you 
designate layers to specific 
functions in your movie. If 
somebody else has to maintain 
your movie, imagine how hard it 
would be if each layer was called 
‘Layer 1’, ‘Layer 2’ and so on... In 
our example one layer is 
designated as actions and is 
labelled as such and the other is 
for the ball symbol, so it is 
labelled ‘Ball’ 


Create a new movie with a black background 


and two layers labelled ‘Actions’ and ‘Ball’ 
Everything else can be left at the default setting. 


With the Ball layer highlighted, insert a new 


2 | movie clip symbol called ‘Ball’ and draw a ball. 
As you can see above we have filled it with a red 
gradient to give it a bit of life. 


CED ela ee 


4 | On the ‘Ball’ layer, create a blank frame at 5 | On the Actions layer, create a blank keyframe 

frame 8. This makes sure that your movie clip in frames 1 and 2. Select frame two and create 
symbol is visible on frames 1 through to 8. This is a label called ‘wait’. Create a blank frame at frame 
the last time you directly do anything with the 5. You should now have a blank keyframe at frame 
movie clip within Flash: from now on all 1 and block of blank frames up until frame 5 with 
manipulation is done through the script engine. the word ‘Wait’ in it. 


a In the main movie, drag the ball symbol on the 
stage in the ‘Ball' layer. Re-size if necessary. 
Name the instance of the symbol ‘Ball’. 


G As the final part of this stage, create a blank 
keyframe on the Actions layer at frames 6, 7 
and 8. Now test the movie to make sure that the 
Ball is visible at all points. If it flickers or disappears 
completely, something is wrong. Save the movie at 
this stage. The script you use has to be in the same 
directory as the saved movie, so until you save, the 
later stages will not work as expected. 


Se eee 
Part 2: Loading the script 


Once the stage has been set, we need to load the script into Flash... 


Expert mode 


Setting the ActionScript entry to 
Expert mode enables you to 
directly enter the ActionScript 
code and format it as you would 
like. Don't be afraid to use ‘white 
space’ to make the code readable 
and populate it with lots of 
comments so that it is easy for 
another developer to understand 
what you are trying to do. Beware 
of flipping back into Normal 
mode though, as it re-formats 
the code, which can be 
incredibly annoying! 


SOOSO Cs See eewereseoeee 


a 


The last line of the code in this frame is the one 
that starts loading the script file: 
loadVariablesNum (“script.txt”, 0); 
Because you are not specifying a path, the file has to 
exist in the same directory as the movie; otherwise 
Flash won't find it. 


Go On the Actions layer, double-click on frame 
one. This should take you into ActionScript 
Entry mode. In this frame you are going to set a few 
global variables which represent the state of the 
script engine and internal variables that can be used 
in the script code. 


8: 
Q The code in frame 6 of the Actions layer makes 
sure the script has loaded. The last line of your 
script file will contain the following: 
Done=1; 
All you have to do is check that this value is present. 
If it is, the last line of your script has loaded. > 
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Part 3: The script engine 


The script has been loaded — now you need to build the engine that can understand it... 


String handling 


The script is stored ina string 
variable called Script, which is 
loaded using the 


LoadVariablesNum command. To 


make any sense out of the script, 
you need to parse it, in other 
words, search the string for any 
relevant information and extract 
it. Thankfully, Flash has a pretty 
powerful string object that does 
everything you need. 
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The function, Getinstruction, goes through the 

string character by character, indexed by the 
InstructionPointer variable. It extracts three 
characters at a time and makes a comparison to see if 
it is a valid instruction. If it is, then it exits — leaving 
the instruction in a global variable called ‘Instruction’. 
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4 | The final function is SearchForLabel. If you 
need to search for a label then you are 
branching. Start the search from the beginning of 
the script since the label could be anywhere. Labels 
have the same format as parameters, so you can 
re-use the GetParameter function to do it. 


feinstruction + “mma”? 
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The BRA instruction is simple. It has only one 

parameter — the label to branch to. It extracts 
the parameter, and places it into a variable called 
‘Label’. It then calls the SearchForLabel function. 
The idea is that the program flow continues from 
the position of the label. 
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With the core code present in the 
Getinstruction function, you just need to add 
code that does a comparison for all of your 
instructions. It is a brute-force method of searching 
the string but it works. At this point don't be 
concerned with parameters — that comes next. 
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The rest of the code for the frame is a ‘While’ 

loop. This is the core of the engine. All the 
previous functions are there to assist this loop. The 
power of this loop is apparent when you begin to 
add the code to execute the instructions it finds... 
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The BEQ instruction is like the BRA, except 
that it is conditional. It only processes the 
parameter and searches for the label if the result of 
the last CMP instruction was equal. This is one of 

the instructions that enables a measure of 
conditional flow control in your scripts. 
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All parameters in the script are encased in ‘<' 

and ‘>' characters. Since the InstructionPointer 
is at the position just after the instruction, all you 
need to do is search for these characters from that 
point and extract the characters in between them. 
The GetParameter function does exactly that. 
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Each instruction is an ‘if block in the main loop 

after the GetInstruction call. The first you need 
to implement is the SXY instruction. The instruction 
expects three parameters, so extract them. The first 
is the name of the movie clip, the second the X 
co-ordinate and the third, the Y co-ordinate. 
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9 | The BLT instruction is another conditional 
branch. This time the result from the last CMP 

instruction has to be less than. 


pranstruetton == "86t" 
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10 The BGT is the last conditional branch in your 
script engine. This time it checks to see if the 
result from the CMP instruction was greater than. 
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The CMP instruction is the most complicated. 

It expects two parameters but both 
parameters can be an internal variable or a value. 
The code has to check for this. Once the correct 
values are obtained it performs an equality, greater 
than and less than check on them. 


G The last of your instructions to implement is 
NOP. It's a simple instruction but as far as Flash 
is concerned it's the most important. It advances the 
InstructionPointer and sets the exit condition for the 
main loop. Without this, Flash would spend most of 
its time running the script engine. 


fone ere’ 
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a The SAL instruction sets the alpha property of 
the specified movie clip. It expects two 
parameters. The name of the movie clip to change 
and the alpha value. Apart from only two 
parameters, this instruction is very similar in 
execution to the SXY instruction. 


sf Cnscrucs fon == “apb") 


4/ This instruction adds 
/ The first parameter is 


// Ceeate a temporary var 
var v1; 

// Get the internal varia 
GetParameter (); 

vl = Parameter; 


// Get the value 
Getparameter(); 


// Ad3 the value to the 4 
eval(vl) += number (Paramey 


14] Now you come to the first of the mathematical 
functions — nothing too hard, just addition. 
The ADD instruction expects two parameters. You 
can only add a value to an internal variable, so the 
first parameter is the internal variable and the 
second is the value. 


* cannes x: SE 
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The last piece of code in your Flash movie 
goes into the Action layer at Frame 8. Alll it 

does is re-direct the frame pointer to execute your 

script engine again with a GotoAndPlay command. 


Yet the (rear) erhalten 


STAY ke Fee: 


Now for something completely different - the 

SET instruction. This enables you to fill one of 
the seven internal variables with a value. These 
variables are called D1, D2, D3 and so on through 
to D7. Use these variables as you would use a 
variable in ActionScript. 


Your second and last mathematical function is 

SUB, which works the same way as ADD 
except, as you might have guessed, it performs a 
subtraction instead of an addition. 


18 | Phew! That's it for everything you need to do 


in Flash. The next stage is to build a script to 
move your ball around... > 
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Part 4: First steps 


Finding your feet with a new language is always the hardest step. It's time to experiment with ours... 


File Format 


Your scripts have to be 
URL-encoded. That means 
separate elements have to be 
separated with an ampersand. 
Scripts consist of two variables. 
The first is the string variable 
containing your script and the 
second variable is to indicate 
that your file has been loaded. 


a The first step is to open up your Text editor. In 
this example, we've used Window's Notepad 
because it saves files in standard ASCII format. You 
can use whatever editor you like as long as it saves 
straight text files. 


2 | Enter the first script: 

Script= 

<Start> 

SXY <_root.Ball> <100> <100> 

NOP 

BRA <Start> 

&done=1 
What you are doing here is creating a simple loop 
that positions your movie clip at co-ordinates 100 
by 100. The &done=1 is the variable that indicates 
the script has loaded. 


g Launch the movie and watch what happens. If 
everything is okay you should see the ball 
switch position on the stage. The loop in the script is 
important because your engine is constantly 
running and without the loop it would try to go off 
beyond the end of the script. 


Part 5: Some animation 


Now that you have the basics of a language, let's try some animation... 


Script potential 


We are using animation to 
demonstrate our script engine 
because it is the easiest way to 
see that the script engine is 
working. The potential of a script 
engine goes far beyond basic 
animation — in the end it comes 
down to what you wanta script to 
achieve. It could be simple 
animation or it could be an 


overall manager for your movie. 
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a The first step in your animation is to add a 
variable. Do this with ‘SET <D1> <20>' which 
loads the variable D1 with the value 20. You have 
also changed the SXY command to use D1 for the Y 
co-ordinate. 


The second half of the code moves the ball 

back up the stage and starts the whole loop 
over again. The engine will continue to interpret the 
script and loop until the movie shuts down. 


Now add three more lines that add 2 to D1, 

compare D1 with 300 and if it is less, branch to 
the label ‘Loop’. This is a basic animation but it does 
show the conditional branching at work and the use 
of variables. 


SxY <_root.8all> <D1> <D1> 
Sat. <“root..Ball> <01> 


<01) <2 
<0 <39@ 
1 <Loop> 


oop> 
ISx¥ <_root.Ball> <01> <b1> 
SAL <_root.Ball> <O1> 


UB <D1> <2> 


w@ <Start> 


ne 


G For alittle variety, why not use D1 for the X 
co-ordinate as well as the Y co-ordinate? You 
can also use D1 to set the alpha property of the 
movie clip. What this should do is make the ball 
travel diagonally down the stage fading from black 
as it does so. And that's basically it... 


Run the movie and watch the ball move down 
the stage. When it reaches the bottom, it 
disappears and re-appears at the top of the stage as 
the Y co-ordinate is reset. The next step is to make 
the ball move back up the screen and add a little 

touch of alpha fading. 


Okay, not a lot happens in this simple 

animation, but it does show the potential of a 
script engine, especially since the animation is 
controlled totally from an external script. Check out 
the SWF on the CD and experiment. Add some 
commands of your own and have fun! EEE 


Saviour of the Universe? 


So who are the best F/ash-turbators on the earth? We round up the world's top five designers 
and look at their inspirations. For the full interviews, visit www.createonline.co.uk/flash 


Fora man who changed the way a lot of people view Flash, Yugo Nakamura is admirably self- 
effacing. Courtney Love once said that Web designers are the new rock stars. Well, Yugo may 


Company: Business Architects, Tokyo _be the vector tool Van Morrison, but he doesnt come across like a new media celebrity. “I’m 


www.oneYine.com 


Want to read the full interviews with these Flash luminaries? In an exclusive deal with Cre@teOnline magazine, you can download these features from their site by visiting 
www.createonline.co.uk/flash. The magazine interviews all the head people at Macromedia in the US to find out where Flash design is headed and Macromedia's strategy for 
the future. In order to expose what makes great Flash design, Cre@teOnline interviews the 10 best Flash designers around the globe, from Europe to the US, Africa to Japan. 


essential energy informs and inspires all his work. “I've loved the music ever since | was a 
little kid, and | think the spirit of it runs through everything | do. It's about getting off your arse 
and doing your own stuff.” Smells like teen spirit to us... 


What's more, there are over 50 tips from designers across the world in order to ensure that you get the most out of Flash... 


Sites: www.yugop.com/ver2 _ not really interested in being an artist,” he admits. “I’m more attracted to naive, simple things 
www.surface.yugop.com  — things witha strong sense of anonymity.” So what does Yugo think makes him stand out ar : : 
from the Flash pack? “I'd like to think that the way | go about production is different to others,” pias epee yehianag tat oe 
he suggests. “You could summarise my approach as ‘craftsmanship’. The original point of the se through ‘hous eth deed nar 
MONO ‘crafts site was to try and achieve something of the beauty the craftsman produces.” enlarged depending on mouse movement. 
Ask any Web designer who inspires them and one name invariably comes up: Joshua Davis. 
The New York-based Flash designer has ploughed a creative path at his agency Kioken, but 
Company: Kioken, New York _ receives more acclaim for his personal sites, praystation.com and once-upon-a-forest.com. 
Sites: www.once-upon-a-forest.com So where does he look for stimulus? “Most of the stuff | do is built on mathematical equations 
www.praystation.com pulled from nature,” he begins. “I built the navigation for Barneys.com after reading about 
fractal mathematics, and a passage on ferns. Think about it: if you walk outside you'll see a “There's so much history on Once Upon A 
tree which has been there for hundreds of years. What's enabled that tree to withstand the hs hy bao Sheng cata 
forces of nature? Well, there's a system and boundaries and rules. So if you can understand date of destruction. | get loads of email 
why it’s successful then you should also start questioning why you can't do that in Flash.” about that, but only 15 people got it.” 
Hillman Curtis, one of Flash’s leading exponents, wants to bring a bit of precision back to 
proceedings. “What's exciting me now about Web design is the need to make things clear in 
From: Hillmancurtis Inc, New York an environment that’s shaped by confusion.” Setting up his own agency, hillmancurtis inc in 
Sites: www.adobe.com 1998, the motion graphics maestro has consistently targeted communication as the key. “A 
www.hillmancurtis.com — good site is something that speaks to me in a way that transcends definitions — a site that 
uses layout, colour, typography and motion to communicate its message. At hillmancurtis inc, Filimaneeda Gilinaneuniscom wes 
we're totally into graphic design. We can jump in and do some back-end stuff, but our real one of the first to incorporate video 
focus is visual communication, and communicating through a global visual language.” footage within Flash. 
When Josh talks, designers listen. In 1997, he founded The Remedi Project, a collaborative 
enterprise pushing experimental Web design. Since then, he’s set up his own agency, 
From: ioResearch, San Francisco _ioResearch, which has become one of the world’s most creative Flash studios. Josh isn't 
Sites: www.ioresearch.com totally at ease with that pigeonhole, though. “I come from a film background, so our work is Vrs it 
www.theremediproject.com very cinematic. Flash lets us do that kind of stuff.” It’s no coincidence that Josh prefers to have Josh's Sahiainees for a6 cumentary- ay 
his screen projected on the office wall. “Our work is so non-traditional that it doesn't even work shines through in The Bill 
necessarily feel right on a Website. We often deal with ideas of interactivity in non-traditional | Bowerman Story, produced for Nike. 
senses, so getting people to interact physically is something we'd like to do more often.” www.nike.com/features/bowerman 
Think punk rock, and you wouldn't necessarily think of Flash — but the parallels are definitely 
there. Without punk rock, music's evolution wouldn't have been anywhere near as loud or 
From: oneYine, New York —_ raucous; likewise, without Flash the Web's progression wouldn't have been quite as dynamic 
Sites: www.volumeone.com _ or animated as it has been. Matt Owens — designer and record label owner — reckons punk’s 


Matt says he prefers to use traditional 3D 
programs: “I've used vector-based 3D 
programs, but you can always tell the 
difference between that and the real thing.” 
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Each panorama is made up of 12 images 


photographer] spent a lot of time 


stitched together, a technical challenge 
in itself, quite apart from those thrown 
up by the nature of the venue, as Tony 
recounts. “Gavin [Pawsey, main 


“Reaching the audience is vital - 


ony David Cray is the well-qualified man 
behind this fantastic project, exploring one 
of the most sensational buildings in the 
world. His team brings the Opera House 
alive using one of the most fantastic software tools 
available. The theatre-lover, musician and multimedia 
author chose Flash for this project partly because of its 
unrivalled market-share: “As in theatre, reaching the 
audience is vital - without them the story isn't told.” 

Tony tells his story: “I’m actually a composer and 
musician. Over the past few years | worked ona few 
multimedia projects and began to acquire a taste for 
development. My main client was the award-winning 
team of IMMLL at Wollongong University, with whom | 
share numerous awards including two EMMA's anda 
BAFTA. Just working with them was an inspiration, and 
much of my ethic is based on them. 

“As an artist whose main arena was performance, 
be it theatre, film or live concerts, | believe in the 


dressing the venues and organising 
lighting in order to display the theatres 


The girth of Flasf’s install base brings performance to the masses: be oat gerber one 


overall image, taking over 18,000 images 
over the three months of development. 


P =. ” 
without them the story isn’t told... Luckily we had a Canon 02000 with a 
1GB PCMCIA card which could store 
460 images at high res, as there was a 
lot of wastage.” 
importance of the illusion of theatre. For centuries, 


stories have been told with the most humble of 
technologies... imagine what sort of theatre 
technology Shakespeare had for his original 
productions of Macbeth or Antony and Cleopatra? Yet 
the potency of his tale was realised - the actors used 
imagination and illusion to create entire water battle 
scenes or moving forests. My approach to multimedia 
has always been inspired by theatre. The technology is 
secondary to the story.” 

With a small circle of colleagues - Gavin Pawsey 
(main photographer), Katherine Phipps (copywriter/ 
researcher), Duncan Thompson (writer/conceptual), 
Jonathan Hairman (3D Artist) - sharing the same 
sense of illusion, Tony has created this amazing site. 
Here's how... 

The Opera House tour project took place in two 
phases. Last year over three months, a team of three 
created a CD-ROM version in time for the Olympics, > 
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and early this year, funding was secured to port the 
tourto the Web. Tony had never used Flash before, but 
had eight weeks to teach himself, and develop the 
entire site... 

The development of the content was quite a task, 
with each panorama comprising 12 images stitched 
together. The Opera House is a very busy place - at any 
given time there are at least five performances taking 
place with hundreds of staff and thousands of visitors. 
“Trying to get venues empty was a nightmare, says 
Tony. “Gavin spent a lot of time dressing the venues 
and organising lighting in order to display the theatres 
in a fashion that would maintain the overall image.” 

“Often we would set up a shot only to find a truck 
arrive to unload scenery for an opera. We would have 
to shoot a few panoramas with the truck in shot and 


Inspired by... 


then come back and re-shoot that region when the 
truck had moved and Photoshop the two together.” 

There were also issues with exposure: “In the foyers, 
we would have ultra-bright Australian sun shining 
down the lens through the glass ceilings, then 180 
degrees around would be pitch black corridors,” 
explains Tony, to the dismay and envy of anyone in the 
UK. “Oursolution was to bracket the entire set of 12 
images, one forthe sun and one for the black, stitch 
each pano and then blend in Photoshop. Some 
locations required five separate exposure panoramas 
- that is 60 images for one panorama!”. 

Ultra-bright Aussie sun? Our hearts bleed... EES 


[w] www.immll.uow.edu.au 
“| look to IMMLL for their attention to 
detail and tireless efforts to create 


what they envision.” 


emagic GMBH 
“Insane German programmers who 
have created the ultimate audio 


application. It’s an incredible world in 


Designers of video recorders 


“Whenever I’m stuck on how to solve an 


interface problem, | go and use my 


VHS machine and I’m reminded how 


which to create music. The design of notto do it.” 


the application is amazing.” 


: inside th house 


Sydney opera 


Podium South East 


1. We reckon the Sydney Opera House project is superb, but Tony was still 
making modifications long after completion: “I created a vector version of 
the 3D map of the Opera House that would enable many more features 
such as zooming in and out, and rotation.” 


2. The bouncing balls leap into the panorama and initiate the loading in the 
next location, yet they were added relatively late in the project. “There was 
no way | had the time to animate over 90 unique ball bouncing 
animations,” explains Tony, “So, | gave myself three hours to pursue the 
leaping balls, and if | couldn't do it in that time, I'd have to drop it.” 


3. Tony discovered that Flash 5 would enable him to build some great 
engines earlier. “I quickly taught myself the basics in ActionScript,” 
explains Tony. “Once | felt a buoyancy with the design and technology, | 
was able to write the engines that would drive the tour.” 
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Computer Arts Web Techniques 
Special - COSB0017 

33 pages of new tutorials including 
3D effects in Flash 4, crossbrowser 
code in Netscape 6, connecting a 
database to an existing page using 
Dreamweaver UltraDev 4 and the 
latest features in Fireworks 4. We 
also take a look at the future of 
Web design, the secrets of great 
style sheets and come up with 30 
tips that you'll find invaluable. Plus 
add-ons, resources and profiles. 
CD Demos of Dreamweaver 4 & 
UltraDev, Flash 5, Fireworks 4 and 
Netscape 6 as well as more than 
30 of the best add-ons. 


Issue 55 — Code CA055 

55 free Photoshop 6 patterns 

CD Plus 10 PS interfaces, and Vue 
d'Esprit 2-the full product 
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Computer Arts Flash Special — 
COSB00i8 

10 new tutorials including creating 
the illusion of 3D, making your own 
extensions, using dynamic menus 
and Vecta 3D. Discover how to 
make your site sounds as good as 
it looks in our Sound & Vision 
feature and pick up an ActionScript 
tip or two. Plus profiles on Hillman 
Curtis and HIT Entertainment, the 
creators of the Bob the Builder 
Website, books, reviews and more. 
CD Demos of Director 8, 
Dreamweaver/UltraDev 4 and 
LiveMotion, plus the Java 
Integration Kit and resources. 


Issue 56 — Code CA0Q56 
400 free Photoshop filters 
CD Six Reyes plug-ins for 3ds max 


and demos of Aura 2, Expression 2. 
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Computer Arts Animation 
Special - COSB0019 

Eight new tutorials include: creating 
a walk cycle in Maya; bring your 
objects to life in Flash; how to show 
emotion in Character Studio; 
combining 3D objects and video 
footage in After Effects; animate 
our free gremlin model in Poser and 
build atmospheric scenes. 

We find out how Passion Pictures 
created the Robbie Williams 
character for his latest video and 
look at the CG division at Aardman. 
CD A Taste of Maya, Poser 4, Flash 
5, Cinema 4D xl 6.1, Retas Pro, 
2.5d Animation Stand and more. 


Issue 57 - Code CAO57 
Colour correcting photography 
CD Double CD issue! Exclusive 
demo of 3ds max 4. 


Arts 
Special - COSB0020 
Eight stunning tutorials written by 
the leading Photoshop artists: 
recreate the surreal cover image; 
create flat vector shapes without 
using FreeHand or Illustrator, 
build an image gradually using 
layers; make a convincing old 
screen print effect for an 
illustration; create a focal point; the 
art of promotion. Master the art of 
colour management and a look at 
the future of typography. 
CD 366 free Photoshop filters and 
extras, and 27 demos including 
Photoshop 6. 


Issue 58 — Code CA058 
100 ways to better Websites 
CD Merlin 3D, Cinema 4D Art, 
Amapi 3D 4.15. 


Computer Arts Dreamweaver 
Special - COSB0021 

We guide you through Dreamweaver 
4 and UltraDevwith nine new 
tutorials and techniques, including: 
setting the configuration; HTML 
layout and page design; creating 
libraries in UltraDev and site 
management. We've also compiled 
155 Dreamweaver solutions: fixes 
for browser bugs; Q&A answered by 
the experts; and tips and shortcuts 
for U/traDev. Plus Matinee and 
Random Media. 

CD 28 Extensions, Dreamweaver 
4, UltraDev, Flash 5, Generator for 
Flash, Netscape 6 and Fireworks 4. 


Issue 59 — Code CA059 
Exclusive Cinema 4D CXL 7 demo 
with expert tutorial 

CD Cinema 4D XL 7, D Sculptor. 


+44 (0)1458 271108 
take out a subscription — see pages 17 & 76 
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Macromedia Flash tips 


When designers and developers start using Flash, the same 
few questions tend to reoccur — we've covered the main ones 
here to help you improve your movies and reduce file sizes... 


n these Flash tips, we've tried to cover the 

typical questions that tend to reoccur. 

When designers and developers start using 

| | Flash, everyone goes throughthe same 
learning experience and at some point in time, the 
same few questions crop up. 

So to save you the hassle of finding the answers by 
trial and error, we've discussed them.on the following 
pages. At the end. we've included a’number of quick 
tips to help you get more performance and better 
download times out of your Flash movies. 

If you really want to start pushing the boundaries 
of Flash, then there's a couple of great sites. 

Try FlashKit.com where you can find in-depth 
tutorials, downloadable files and how toss to get 

your projects moving, and while you're logged on, 
why not take a trip to the Flash Exchange at 

[w] www.macromedia.com where there are now over 
100 Extensions (plug-ins) available for Flash 5, and — 
best of all — they're all free. 


Sending an email 
You can send emails from a Flash button using the 
getURL action. Instead of specifying an HTTP address 
inthe URL field, use ‘mailto:’ followed by the email 
address, a question mark, and the desired fields 
followed by an equal sign to set its text. You can add 
more parameters, separating them by ampersand 
Signs. Here’sian example: 
on (release) { 

getURL 
(“mailto:theboss@somecompany.com?subject=-O0O0 
today&body=!'m running some fever this morning, so 
I'm going to stay home and get some rest. 
&cc=anotheraddress@someothercompany.com"); 
} 


Using external scripts in your movie 
You can create ActionScript (As) files in any external 
editor and use the Include action to include the code > 
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Illustration: Anthony 


during swf export. To use your external scriptfile, 
select the frame or object you want to add the script to, 
open the Actions panel, and type in #include 
“yourfile.as”. 


Using ‘this’ 

Flash 5 introduced the keyword ‘this’, which makes 
referencing objects and Movie clip instances a lot 
simpler. The following example uses an onClipEvent 
handler, where ‘this’ points to the current Movie clip: 
(when the Movie clip loads, a startDrag operation is 
initiated for the current Movie clip). 


onClipEvent (load) { 
startDrag (this, true); 
} 


Detecting a double-click in the 
Flash Player 


Flash 5 makes it possible, by using the 
onClipEvent(enterFrame) handler, to detect an actual 
double-click, where one action happens only ona 
single click, and another action happens only ona 
double-click. This handler enables your script to check 
acondition at specified times. Here's how: 
* Place an instance of a button symbol on the stage. 
- Nest the button within a Movie clip, then select the 
button and choose Insert>Convert to Symbol and 
choose Movie Clip as the behaviour. 
- Attach the following script to your new clip: 
onClipEvent (load) { 
doubleclickDuration = 300; 
lastClick = 0; 
} 
onClipEvent (mouseUp) { 
if (this.hitTest(_root._xmouse, _root._ymouse, true)) { 
if (lastClick == 0) { 
lastClick = getTimer(); 
yelse { 
lastClick = 0; 
trace (“double click"); 
} 
} 
} 
onClipEvent (enterFrame) { 
if (lastClick>0) { 
if ((getTimer()-lastClick)>doubleclickDuration) { 
lastClick = 0; 
trace (“single click"); 


Here's the logic: 

The onClipEvent(load) message is sent to the Movie 
clip when it starts up, and so is a good place to 
initialize variables. Here, a variable named 
doubleclickDuration is set to the desired length of the 
double-click time, in this case 300 milliseconds. The 
script itself, during various clicking combinations, 
manipulates the other variable, named lastClick. 

The onClipEvent (mouseUp) contains a hit-test 
routine to make sure that the button Movie clip was 
actually clicked. Then the code checks whether the 
variable named lastClick already has a value. 

If not, then we know this is the first click that has 
occurred ina while, and so lastClick is set to the 
current value of the timer. 


But if the variable named lastClick already has a value, 
then we know there was another click recently. It 
resets the value of the lastClick variable to Zero and 
then performs the desired double-click action. 

In this example the result is sent to the message 
window using a trace command, but in your own 
movie, you can substitute a real command for this 
tracing placeholder. 

Finally there's the enterFrame handler, which 
checks whether the variable named lastClick has a 
value on each frame, indicating a recent mouseclick. If 
so, it checks whether the last click occurred so long 
ago that we know it cannot be a double-click. 

As soonas the time exceeds that 
doubleclickDuration, the routine resets lastClick to 
Zero and executes a single click action. If the mouse 
click happened only a very short time ago, then 
nothing happens until the next time an enterFrame 
event is triggered and the time is checked again. 


Mouse-free navigation 


With accessibility in mind, using keyboard input 
instead of a pointing device, such as the mouse, is a 
good navigational alternative. Key Events, attached to 
button instances, occur when you press a letter, 
number or symbol in your keyboard. Here is an easy 
approach to capturing key presses in Flash: 


‘ Drag a button to your stage. 

* Right-click on it to bring out the Actions panel. If 

you chose Actions>On, the on (Release) event handler 
will appear. 

‘Deselect the default Release and click on Key Press. 
If you simply type a key on the keyboard (with the 
exception of the Escape and Function keys, because 
these aren't valid strokes), yourargument will change 
to keyPress (‘the key pressed’). Assign that key press to 
trigger the action. 


ActionScripting tips 

The Actions panel 

It pays to spend a little time with the Actions panel to 
familiarise yourself with its features, because it’s a 
panel you will use time and time again. You want as 
much room as possible to see your excellent scripting, 
so open it up as wide as possible. Remember that if 
you're using Normal mode, all the syntax can be 
chosen from the ‘+’ button at the top-left of the panel. 
Therefore you may like to collapse the left-hand pane 
using the button midway down the middle divider. 


Finally, once you're happy with the size and position of 
the panel, don't keep opening and closing it: use its 


subLabels = ["a",“b", "co". "d","e"]; 
subit= "PERSONAL"; 

subi2 = "1976 - 73°; 

SubI3 = “1980 - 96"; 

Subi4 = "TRANSFORMATION"; 


Use the Movie Explorer to find scripts with a keyword search. 


Toggle High Quality 
Stop All Sounds 


Get URL 
FSCommand 
Load Movie 
Untoad Movie 
Tell Target 


y eases (4394473 
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Esc+go 
Esc+pl 
Esc+st 
Esc+tq 
Esc+ss 
Esc+gu 
Esc+fs 
Esc+im 
Esc+um 


if Frame Is Loaded 
On Mouse Event 


Choose your script elements from the pop-up and collapse the left panel. 


Windowshade feature to collapse it into its title bar by 
double-clicking the title bar on Windows, and clicking 
the top-right button on a Mac. 


Script not working? 
We're all used to the script not working the first, or 
even the twenty-first time, that's development for you, 
but it’s worth checking that you haven't got a 
conflicting script that you've forgotten about, hidden 
within a Movie clip. This used to be a ‘Sherlock | 
Holmes’ activity until the advent of the new Movie 
Explorer. Using the row of buttons at the top, make sure 
only the third button along is activated and you'll see 
in the list all the scripts you've written, and probably a 
few that you didn't! 

Trying to find a script that you know you've written 
but can’t remember where? Typing a keyword in the 
find box further narrows the list of scripts, making it 
even easier to find. 


Dot syntax 

Flash 5’s awesome scripting capabilities give the 
program an infinite number of capabilities over its 
predecessor, so time invested in discovering the 
syntax is time well spent. In particular, the new dot 
syntax can makes scripts a lot easier to read. Take as 
an example, the getting and setting of properties. The 
properties of Movie clips can now be accessed much 
more quickly. Let's say you want to find the position of 
a Movie clip called ‘myMovieClip’ and move it 10 


Use the new dot syntax to make your scripts clearer to read. 


pixels to the left — this can now be easily done using: 
myMovieClip._x = myMovieClip._x + 10 


Scripting control of sounds 

To have full control over the playback of sound, 
independently of any timelines in your Flash movie, 
consider placing your sound into its own Movie clip. 
Create a new empty Movie clip in your movie, then 
place your sound into frame 1, set it as streaming, and 
then add enough frames for the sound (keep adding 
frames for the whole time that you can see the sound 
appearing in the timeline!) 

Now, play the clip and add any labels you require to 
identify portions of the sound, such as strings, or in the 
case of sound effects, bangs and crashes and so on. 
Finally add the Movie clip to your main timeline and 
give it an instance name to identify it, such as 
‘sound01’. Now, anywhere in your movie, your sound 
can be started and stopped using 

_root.sound01.play() or _root.sound01.stop() 


To play the sound from a label called ‘peak’, use 
_root.sound01.gotoandplay(“peak") 


To replay the sound from the beginning, use 
_root.sound01.gotoandplay(1) 


Incidentally, if you normally use the Easy mode of the 
ActionScript editor, you may be wondering how you 
enter freeform lines like the examples above. That's 


A Movie clip containing your sounds enables them to be played 
under full control of ActionScripting. 


macromedia’ 
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what the evaluate script is for. From the script pop-up, 
choose Evaluate from the Actions sublist, and the 
editor will provide you with a blank line, correctly 
terminated by a; 

Use functions to avoid repetitions in your scripts 
Try to avoid placing copies of identical scripts in 
different places throughout your movie. If you find 
yourself copying a script and pasting it several times 
throughout your movie, maybe onto different buttons, 
it’s a fair bet that it would be better written as a 
function. Functions serve many purposes, but by far 
the most useful is that a script with a bug in it only 
needs fixing once, not everywhere you use it. 

Create a layer on your main timeline and call it 
functions. In frame one of this layer, just add your 
functions as you require them. 

Taking a simple example, say you are continually 
calculating VAT throughout your movie, but multiplying 
a number by 1.175 at the moment (for 175 percent). 
Create a function in your new storage area like this: 


function doVAT (nett) { 
return (math.floor(nett * 1.175*100)/100); 
} 


Now you can use this calculation from any place in 
your movie. Suppose you want to create a variable 
called grossAmount from one called nettAmount by 
adding the VAT, your script would read: 


grossAmount = _root.doVAT(nettAmount); 


Now, whenever the VAT rate changes, you just make 
the change once, in your function, not everywhere in 
the movie that performs this calculation. 

If you get into the habit of always calling the 
function with _root in front of it, you can be sure that 
the function can be found from wherever you are 
inside a movie. 


Animation tips 


How can | make swfs start quickly? 

One of the goals of the Flash Player is to start up 
quickly, so that visitors to your site do not need to wait. 
A few simple changes to the way an swf is formatted 
can have a dramatic effect on download time. 

Without getting technical, the art for frame 1 must 
be downloaded before you can view frame 1, then any 
additional art for frame 2 must be available before you 
can see frame 2, and so on right through to the end of 
the movie. 

The key to a fast-starting swf file is to start with 
small pieces of media, and to animate with them while 
larger pieces of media download in the background. 
Many movies start with a bit of text zooming in, ora 
single shape moving into the screen, and only get into 
the more complex assemblies of curves and photos 
later on in the presentation. 

This gives you the most time to download the 
larger pieces, and also lets the file start animating 
right away. 

The easiest way to think about this is to let the initial 
visual interest be guided by motion, rather than by the 
constantly introducing new shapes. 

Check out the Flash bandwidth profiler to get a 
great view of what's really happening with your file. 


How to make a Flash movie with a 
transparent background 

The holy grail for many Flash users... Well there's some 
good news and some bad news. The good news is that 
the background of a Flash movie can be set to display 
as transparent, but, and now for the bad news, 
unfortunately only in Internet Explorer 4 and above for 
Windows. The movie's background isn't transparent for 
users of Netscape Navigator for Windows and all 
Macintosh browsers. 

It's very easy to set up - simply go to the File menu 
and select Publish Settings, when the dialog opens 
select the HTML tab. 

Select File>Publish Settings and select the HTML 
tab. Choose Transparent in the WMODE setting to 
make the Flash movie's background disappear in IE4 
and above on Windows. 

To edit an existing HTML page instead, add the 
following parameter to the OBJECT tag in the 
HTML code: 


<param name="wmode" value="transparent"> 


It's also worth noting that you can't set the background 
of a projector file to transparent. 


My motion path animation doesn’t work 


When you try to animate along a path, sometimes the 
object moves ina straight line and ignores the motion 
path you've drawn. This normally occurs if the 
registration point of the object being tweened hasn't 
been ‘snapped to’ the motion guide at one or both ends 
of the animation. This problem can also be caused if 
the motion path line has been moved or edited without 
re-snapping the objects in each keyframe to the path. 

Go to the first keyframe and click and hold on the 
symbol you'd like to animate along the guide. You'll 
notice a little circle appears in the symbol - this is the 
centre snap point. As you move the symbol close to the 
guide, it snaps to it. You can place the symbol 
anywhere on the motion path. Now do the same with 
the symbol on the last keyframe. 

The symbol now animates along the path. When you 
change the scale, rotation or other effect such as 
Alpha, then these changes are animated along the 
path as well. 


Has the Flash Player installed? 

Detecting whether someone has the Flash Player 
installed can cause a bit of head scratching. Probably 
the quickest and simplest way is to use a Flash movie 
to see if Flash Player is installed! Create a very simple 
movie: it could be a small as 1 pixel by 1 pixel. Leave 
frame one of the movie blank, on frame 2 use a get 
URL command to load the main site. Embed this Flash 
movie into a blank HTML page. In the header of the 
page at a URL re-direct script, and set this to about 
two seconds — to an HTML version of the site orto the 
Flash download page. When a visitor comes to the site, 
the first blank page loads up — if they've got Flash 
installed, the movie will play and will load the rest of 
the site. If they haven't got Flash installed, nothing will 
happen for two seconds, then the URL re-direct will 
work and send them to the alternate page. FEES 
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Rotational navigation 


Flash provides the means to create innovative 
interfaces that don't rely on hyperlinks... 


he standard means of 

navigating within a Website 

is via a point-and-click 

method. Each click opens a 
new page in your browser window. Easy 
to understand, this system is also the 
quickest way to guide a user to 
information: one reason why most sites 
make use of it. 

But not every site is produced with 
the bottom line in mind. If you want to 
make the journey to your information 
as engaging as the content, then you 
need a system which expands on 


point-and-click. Flash provides a means 
of creating innovative interfaces that 
don't rely on the hyperlink method. 

The Laramara ([w] www.thunderhouse. 
com.br/cannes/laramara/) site, 
forinstance, uses sound as a means 
of navigation, and Liquid Idea 
([w] www. liquid-idea.com) uses a 
scrollable interface based on a New 
York subway map. 

This tutorial shows how it’s possible to 
create a navigation system that uses 
rotational movement to slide content on 
to the screen. 


Part 1: Creating the symbols 


First you need to create nested movie clips for the navigation to work 


Nested movie clips 


The use of nested movie clips is 
vital in creating any complex 
interactive Flash movie. They 
reduce clutter on the main 
timeline, making the movie 
easier to edit. More importantly 
though, they enable you to use 
the full power of ActionScript 
as an object-oriented 
programming language. 


Draw an outline circle on the main timeline 

with a diameter greater than 100 pixels. This 
forms a visual track for the ball to slide around. 
Further tracks (smaller or larger) can be added later 
to create a full menu system. For this tutorial you'll 
only need to use one. 


Edit ‘new media rotator’. Select the button 

and move it horizontally right, away from 
the centre of the clip. The distance you move the 
button should be the radius of your circle on the 
main timeline. 
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Draw another outline circle on a new layer, 

about 15 pixels in diameter. Convert it into a 
graphic symbol and call it ‘circle edge’. Repeat with 
a filled circle and name it ‘circle’. Convert the 
instance of ‘circle edge’ into a button called ‘new 
media rotate button’. 
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On the main timeline select ‘new media 
rotator’ and convert into a movie clip called 
‘new media rotator clip’. Edit this clip. Give the 
instance of the ‘new media rotator’ the name 
‘rotator’ and rotate it -90 degrees. Add frames so 
that the instance lasts until frame 100. 
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Edit the button and use ‘circle’ for the Over 
and Down states. Select the button and 
convert into a movie clip called ‘new media rotator’. 


On the main timeline, give the instance of 

‘new media rotator clip’ the name ‘nmrot’ and 
position it so the small circle sits at the top of the big 
circle. The centre cross-hairs of this clip should 
match the centre point of the large circle. 


Part 2: Rotational movement 


Here's where it gets technical — time for the ActionScript and a bit of maths 
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Edit the ‘new media rotator clip’, add a new 
layer and call it ‘actions’. Insert a blank 
keyframe at frame 2. Insert the following script: 
gotoAndplay(1); add a blank keyframe at frame 3. 
The actions in this frame will control the movement 
of the ball around the circle. 
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First, you need to establish a new position for 

the centre of the x/y axis. Do this by 
subtracting the centre position of the circular menu 
from the current mouse position. The Math.round 
function is used to extract a whole number for 
variables x and y. 


To calculate the angle of the mouse in relation 

to the centre of the menu, think of it as a 
triangle — the points formed by x, y and the centre 
of the menu. Then use the Math.atan and Math.P! 
functions to calculate the angle of the triangle. > 
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That doesn't give an actual angle though. To 

obtain that, you need to add the variable tan 
to 360 to create the variable r. However, if the value 
of either or both x or y equals 0 then you need to 
add tan to 180 instead. 
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For ease of editing, add a new layer with blank 
keyframes at frames 5 and 6. The script added 

here will be called on later to send the ball back to 

its start position when another menu ball is clicked. 
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10 Edit the movie clip ‘new media rotator’ and 
give the button the actions to call your script. 
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G The value of ris the angle plus 269. Thus, a 
return of 269 would equal 0 degrees and 449 
would equa! 180 degrees. And if loop is used, you 
can constrain the movement of the ball around the 
circle to half the circle. 
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If the ball is not in its starting position at frame 

5, use an ‘if...else’ statement to move the ball 
2 degrees backwards at a time. If the ball overshoots 
its start position, the ‘else’ clause returns it to its 
correct position. The variable angle is updated too. 
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o When the button is pressed, tell the clip 
‘nmrot' to go to frame 3 and start the 
rotation script. To stop the rotation, use the 
‘release’ and ‘release outside’ actions to return the 
clip to frame 1. 
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g Finally, you can tell the ball to rotate using 
the ‘setProperty’ action to the value of r. 
To ease later calculations, add a variable ‘angle’ 
which is r minus 269. A blank keyframe is added at 
frame 4 with the script: goto frame 3 to loop the 
playback head. 


9 | The script in frame 5 needs to be in every 
frame until frame 100. Rather than repeat this 
script in each frame, use the ‘call’ action to invoke 
the script in frame 5 from each frame instead. This 
makes the script easier to edit. 
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Later, when more sections are added to the 

menu, you'll want the one you are dragging to 
always appear above the rest. This is achieved by 
using the ‘swapDepths’ action and a depth of 1. 
When other menu options are added, you can 
control their movement from this script. 


Part 2: Rotational movement continued... 


Multiple 
applications 


While the ActionScript used in 


this tutorial is intended fora 
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navigation system, it could 
easily be re-used in other 
situations. Examples include 


Bi 
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knobs to control sound volume, 


oe 


or even — with some extra work 
—aroulette game. 


14] Frame 1 of the clip will be completely clear 
While you want to engage the user, you don't except for a ‘stop’ action. At frame 2, create - - 
want to confuse them. So, create an animated —_ your animation and add a ‘stop’ action at the final Go back to your button in the ‘new media 


movie clip that acts as a rollover for your button, frame of the clip. Give this clip the instance name rotator’ movie clip and when the mouse rolls 
showing the user which section the button refers to. ‘nmrollover’. over, tell ‘nmrollover' to go to frame 2 and play. 


Part 3: Moving your content on to the stage 


Here you can create the movie clip where the content for each section resides and the script that moves it 
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1 Draw a box on the main timeline whose 


top edge is below the bottom of the stage In a new layer in the ActionScript for frame 1, 
and convert it into a movie clip called ‘new media | 2 | In the ‘new media scroll clip’ add a keyframe at you need to call a variable from another movie 
clip’. Convert this into another movie clip called 100. Move the box so that its bottom edge is clip (see next step) and use it to tell the playback 
‘new media scroll clip’ and give it the instance level with the bottom of the stage. Create a motion head which frame it should go to. Then, call frame 1 
name “newmedia”. between these keyframes. in every frame from 2-100. 


Part 4: Linking the menu and the content 


This is where you use an ‘invisible’ movie clip to pass data from 
your menu to your content in order to control its position 


[hte ton view tier Necty tex come wines tei um ES apie 


1; SNARES YET e 


ag Create a new movie clip and call it ‘new media 2 Create a piece of script which calls the variable — 

logic clip’. Drag an instance of it on to the angle from the ‘new media rotator clip’. The - ~ - “ 

stage, but place it outside the stage edges. Give it angle is then converted into a percentage of half the 3) Your navigation is now complete. The content 
the instance name ‘nmlogic’. It may be helpful to 360 degrees of the circle. Flash timelines start with should slide on and off the stage as the ball is 
put a symbol in it to make it easy to find. frame 1 so you must prevent a value less than 1. moved back and forth. 
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Broad Snout 


Tired with the unimaginative, garish and repetitive use of Flash, 
Pete Fowler and Simon Pike went in search of: “an immersive, 
atmospheric Web experience using the different elements of 
multimedia”. Welcome to the world of Broad Snout... 


ometimes, in order to move forward, 
someone needs to stand back and see the 
if ij real picture. That's what Simon Pike and 

| Pete Fowler did when they formed their 
company, Broad Snout in 1999. With a mission to 
revolutionise Flash design and multimedia content 
from concept to delivery, the dynamic duo have 
garnered media acclaim, built up a client list to die for, 
including Sony Music, Greenpeace and the Super 
Furry Animals, and fulfilled their own artistic goals in 
the process. 

Simon and Pete met ten years ago when both were 
studying Fine Art at Falmouth, where they collaborated 
on their degree show. It was another seven years 
before Simon, now doing an MA in Hypermedia 
Studies, approached Pete with the idea of featuring his 
weird and wonderful characters for his final project. A 
year later, Broad Snout was conceived... 


Monster challenge 


For Simon in particular, the self-taught Flash whizz, 
multimedia content on the Web was all too much of a 


muchness. “The Flash work | was seeing was very 
similar; lots of in-yer-face movement accompanied by 
a techno loop. | was interested in creating something a 
little more subtle, different and atmospheric,” asserts 
Simon. With Pete providing the bizarre designs and 
storyboard content, the two set about showing a 
different angle to Flash design and content. 

It was in fact the wondrous Flash design of 
Fowlerism which attracted so much media attention. 
“Fowlerism was a promotional tool for Pete's work,” 
says Simon. “It sounds a bit grand but it was more for 
personal artistic pleasure,” he adds humbly. 

No matter, it was the springboard needed to 
catapult Broad Snout into the limelight. Without any 
PR, [w] www.fowlerism.net became an award-winning 
Web phenomenon. 

In 2000 it was featured in magazine style bible, 
Face, made TV news on The Lounge Programme, which 
aired on Dot TV, and was trumpeted on Jo Wiley’s 
Radio 1 show. Then there's been Dazed & Confused 
magazine, numerous Japanese glossies and a nod to 
Broad Snout’s TV work in Broadcast magazine. It’s been 
an incredible two years then, but have Pete and > 


See for yourself what all the 
fuss is about by visiting 

[w] www.fowlerism.net and 
making a Flash monster. 
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Simon been surprised by their success? “Yes,” admits 
Simon, “however, Pete's work is obviously very strong 
and distinctive and assisted by Broad Snout translates 
beautifully to the environment of the Web.” 

Gradually, the client base has crept up and 
increasingly important ones too. “Greenpeace was one 
of my first clients,” says Simon. “Basically, one of its 
project managers saw some Flash stuff | was 
experimenting with (before Fowlerism) and 
commissioned me on the strength of that. The Sci-Fi 
channel (Universal Studios Network) approached Pete 
after seeing Fowlerism and the SFA (Super Furry 
Animals) contact came through Pete who has been 
working with the band for a while.” 


Broad horizons 


There seems to be no limit to what the guys want to 
achieve. When Fowlerism began, Simon was just 
developing his Flash skills. Now he's looking at the 
future of Flash and the potential the program has. 

“What | find most interesting about Flash at this time 
in the industry is that it can be used to develop 
broadband and narrowband identity simultaneously. 
You can create a Web presence while also creating a 
broadcast-quality animation. There is also the fact that 
you can produce broadcast-quality animation ona 
package that costs in the region of £500.” 

This interest clearly shows in the work Broad Snout 
is currently undertaking. At present, the workload is 
split evenly between narrowband and broadband. And 
Simon relishes both projects. “I still enjoy the 
challenges presented by narrowband: | think 
organising and streaming graphics and images is one 
of the key qualities to being a good Flash designer. Of 
course, there's more freedom producing broadband 
content: file size is not an issue.” He continues, “the 
challenge, however, is very different, people are used 


1. The main home page from Fowlerism. The profile of a woman's 
face emerges blowing ghost-like smoke out with the haunting, 
ambient Yellowbird Studios music playing. The circular images 
either side are links which open like eyes when the user rolls 
over them. A first taste of Pete and Simon's unique Flash work. 


_ 2.\t made perfect sense for Broad Snout to do some work for The 
Sci-Fi channel considering Pete's affinity for monsters. Working 
as continuity links, the kitsch and inventive animation was aimed 
at raising the profile of the channel on its fifth anniversary. 
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to seeing very sophisticated, big budget animations on 
the television, so you are working in a different arena 
with different benchmarks.” 

It is broadband which looks to be the future for 
Broad Snout though. Its recent work for the Super 
Furry Animals’ new DVD/album release (see boxout), 
where Pete and Simon were given free reign to do 
what they wanted for two of the videos, shows the kind 
of work they are being commissioned to do. Simon is 
excited by the prospect: “Broad Snout is doing an 
increasing amount of broadband work, experimental 
and corporate. We are also increasingly moving into 
using film and video footage and 3D software.” 

But for now, if you want to see Pete and Simon's 
brainchild, the original showcase work, look no further 
than [w] wwwowlerism.net — a psychedelic trip 
through ‘monsterism’, which is at turns beautiful, 
haunting and esoteric. And what is ‘monsterism’ 
exactly? “Monsterism is a tag I’ve put on my work,” 
explains Pete. “It's a culmination of years of designing 
characters and monsters that had no home or name. 
I'm aware of being pigeonholed into a genre so | 
thought I'd do it myselfl”. 

Still confused? Then click on the Make a Monster 
link to experience a world of bizarre characters and 
Flash wizardry. All it takes is a vivid imagination and a 
Website of irreverent madness for everything to make 
perfect sense, as Simon concludes: “Often Pete will 
create a character and this will generate ideas for an 
environment... an idea which is suitable for Flash. And 
after considering Flash as an interactive tool, the 
concept of Make a Monster seemed obvious.” 

Sometimes, it takes that step back to see the 
way forward... EEE 


3. More of Pete's creations from Fowlerism, beautifully rendered 
in Flash, with the Yellowbird Studios music playing again. Rolling 
over different eyes, brings out different characters and sounds. 


4. Subversive, irreverent and bizarre. Click on 
[w] www.fowlerism.net/sound.html and see the bear get it! 


5. The home of Broad Snout. Get a taste of what Pete and Simon's 
company is all about with information relating to its background, 
clients, and the acclaim Broad Snout has received. 


Super Furry Animals 


Pete has been working with the Welsh band for the past four 


Receptacle, in particular, has some wonderfully dark 


years, designing a lot of its covers and promotional material. imagery, where the changing environment contrasts the 


The SFA’s latest album release is no exception with Pete's changing mood of the animated character. 


distinctive style evident once again. This time, to coincide With no brief and limited time, Pete and Simon 


with the album and DVD release of Rings Around the World, _ brainstormed the idea of a strange character embarking ona 


[w] www.ringsaroundtheworld.co.uk, Pete and Simon have journey through different environments. The result is a 


produced some of their best Flash work to date on Flash-driven piece of animation which complements the 


Receptacle for the Respectable and Sidewalk Serfer Girl. Beatles-esque track perfectly. The DVD is released on 23 July. 
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IX _ Expertise provided by Chris Schmidt 
[e] chris@track5.co.uk 


“aS 
6S ) Files on disc 
=/ Files are onthe CDin the 
\tutorial\Sound editing folder. 
Cool Edit 2000 costs approx £49 and 
Cool Edit Prois approx £282, more 


details from [w] www.syntrillium.com. 


Or download a trial version from 
[w] www.cooledit.com 
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Sound editing in 
Cool Edit 


If you want your sound quality to match 
that of your picture, ditch Flash and go for 
something a little more specialist 


t's no secret that the 
majority of Flash animations 
5 are mute affairs — they 

Eee impress visually, but do 
little to intrigue the other senses. And 
until future VR technologies enable us to 
smell, touch and taste the medium, there 
isn't much else that can be done with 
Flash, apart from experiment with sound 
of course... 

Designers do graphics and some do 

animations, but most would prefer to 


doodle on their Wacoms than dabble 
with waveforms. So when it comes to 
creating and editing sound clips for use 
in Flash, the possibilities are ignored. 

The curious thing is that while most 
designers spend hours at pixel level 
perfecting their craft, many lack a basic 
understanding of how digital audio 
works. Ultimately, however, your audio 
standards should be just as important as 
the visual appearance — this tutorial 
shows how it’s done. 


Part 1: Digital audio for designers 


Waveforms provide the best quality sound reproduction — 
WAV or AIFF formats can be imported for use in your movie 


Flash sequencing 


Flash operates in a similar way to 
many music sequencers. Once 
you're comfortable with the 
basics of Digital Audio, take a 
look at some sequencing 
packages and open a sample file 
to familiarise yourself with the 
concepts. This should provide 
quite a few new ideas for working 
with Flash. 


Music lessons 


Just as knowing how Photoshop 
works doesn't make you a 
designer, an understanding of 
digital audio won't make you a 
musician. Learning the 
rudiments of music provides 
amore of an insight when 

using sound. 


@ Waveforms provide the best quality sound 
reproduction. Either WAV (PC) or AIFF (Mac) 
formats can be imported for use in your movie, but 
because Flash has limited sound-editing controls, 
you'll need to take them to a dedicated editor to 
gain complete control. 


These waves are measured in the frequency 

cycles they go through. A cycle is defined by 
the amount of time it takes a waveform to travel 
through all its amplitude phases until it reaches its 
original point. Things get rather complicated when 
two or more sound waves meet: their amplitudes 
affect each other, causing complex waveforms. 


For sampling rates to be accurately 

reproduced, their range needs to be twice the 
frequency of the original sound. This is measured in 
Hz so, for example, because the human ear can 
register just above 20kHz, CD sample rate has a 
sample rate of 44,100 samples per second. 


Sound is created by vibrations which disturb air 

molecules and create a rippling effect — this is 
interpreted by the ear as sound. Waveforms 
represent these pressure waves with the zero line 
marking air pressure at rest. The lines above show 
high pressure, the ones below, low pressure. 


With analogue recording, a microphone 

interprets these pressure waves as voltage, 
matching the original sound. A speaker works in 
reverse, taking the voltage signals from the 
recording and vibrating to recreate the pressure 
waves which our ears interpret as sound. 


8 | While sampling rates provide the number of 
Bézier-like points, a waveform generates. The 
bit depth defines the number of available amplitude 
stages. 1-bit can represent two states, 2-bit four and 
3-bit eight and so on. CD quality is 16-bit which 
enables each sample to have 65,536 possible 
amplitude values. 


This change of pressure is known as amplitude. 
This measures the distance between the peak 
(top) of a waveform to the trough (bottom). 


G When a sound is digitised, the waveform is 
broken up into individual steps or samples. 
Higher sampling rates enable a greater number of 
possible steps, providing a more detailed 
reproduction of the original waveform. This can be 
likened to image resolutions; higher resolutions 
enable more detail, although lower resolutions 
require less storage. 


oO Generally speaking, WAV or AIFF files 
imported into Flash should be 16-bit 22kHz 
mono sounds because this provides reasonable 
quality. Stereo clips can be used but will inevitably 
double the file size by using two channels. Flash can 
export sounds down to lower sample rates, so use 
the best quality necessary. > 
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Part 2: Cool Edit walkthrough 


Flash has limited capabilities when editing waveforms, so we'll 
use the sound-editing software Cool Edit for this 


Get to know your 


editor 


Most waveform editors provide 
extra features such as noise 
(hiss) reduction. Most waveform 
editors enable you to rescue and 
modify existing clips — just as 
Photoshop facilities enable you 
to clean up scratched or colour 
imbalanced images. 


Relieve the tedium 


If you find yourself going 

through the same routines while 
editing your clips, consider 

the Batch Processing 
capabilities in the Options menu. 
These enable you to record 

a sequence of actions for 
application over a number of 


selected files. 
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a Now you know the principles of digital audio, 
you need to become familiar with some 
powerful sound-editing software. Flash has very 
limited capabilities when editing waveforms so use 
Cool Edit for this. Download a trial version from 
Syntrillium’s Website [w] www.cooledit.com. 


| 4 | The amplitude ruler on the right of the screen 
measures the relative volume of your audio 
data, while the time ruler along the bottom shows 
your location in time. 


Like Photoshop's Zoom tool, Cool Edit enables 

you to zoom into your waveform all the way 
down to individual samples represented by small 
squares. The line connecting them is the analogue 
interpretation of the digital data. 


2 | Many of the features are fairly self-evident, 
being divided into the main waveform display 
dominating the centre with controls for playback 3 | The display window contains a graphical 

and editing tools surrounding it. Open the representation of the waveform you are editing 
clicks.wav file from the cover CD so you can see with time running left to right. With stereo clips, the 
things in action. window splits into two horizontal planes. 


Go The Transport toolbar should be familiar, with 
regular features such as play, rewind, fast 
forward, pause and stop buttons, plus record for 
creating new waveforms through your computer's 
together by menu families. Toolbar buttons can be line-in. The two unfamiliar buttons provide Play To 
End and Play Looped Options. 


G The toolbar at the top contains shortcuts for 
frequently-used menu functions grouped 


customised through the Options>Toolbars menu. 


0:00.008 


9 | The level monitor at the bottom of the window 
8 | The Time Display provides information on is used to monitor the volume of incoming and 
your current location within your clip while the — outgoing signals and the status bar below that 
related fields give more specific detail on the provides overall information about your file, such as 


beginning, end and length of your entire clip or sample rates, bit rates and file size, Right-click for 
selected sections. further options. 


Part 3: Editing waveforms 


We're going to divide the click.wav (PC) or click.aiff (Mac) 
files on the cover CD into three individual files for use in Flash 


Infinite loops 


One of the most effective ways of 
having continuous sound is to 
loop a short sequence of four, 
eight or 16 beat phrases. Using 

a Waveform editor gives greater 
control and smoother joins over 
the start and end points. 


nMOS oem 
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a Open the click.wav (PC) or click.aiff (Mac) file 
from the cover CD and you should see a 
waveform with three distinctive sections. If you play 
the clip you'll hear three rapid pops which you're 
going to split into individual files to use as a 
mouseover event for some buttons in Flash. 


New Wavelorm 


4 | Create a new file and match the settings of the 
original file, that is, 44,100 sampling rate, 
16-bit resolution and mono. Then Paste your copied 
segment again via the File menu or using keyboard 
shortcuts and Save it with the name click1. 


000.000 


Here, go right down to individual sample 
level; samples being denoted by the squares. 


SMO Cee 
THETHTIOED UU 


| 0.00161 
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[44100 16-bit- Mono [i2K [a0 161 15151.61 MB free 


Check out the status bar for information on 

the files’ sampling and bit rates and you'll see 
that they currently stand at 44.1kHz and 16-bit. If 
the file size isn't available, right-click on the status 
bar and select the appropriate option to display it. 


Scact SceCoRor ee ce 
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G As Cool Edit expands the view to fill the 
display window it might appear to be a 
different clip, but as more timeline can be viewed, 
the clip is effectively stretched across the window. 


NOS | Md NIA Td 
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G If you zoom back out so that the entire clip is 
viewable in the display window and play the 


(saan era aes aa | HE 


Oo Editing and optimising this clip into three files 
is as simple as cut and pasting. Click-and-drag 
to highlight from the beginning of the first click to 
its end where the wave is flat, and then Copy using 
the File menu or regular keyboard shortcuts. 


u 


remove any silent sections that only serve to 
increase the file size and delay playback. Where the 
waveform is flat there's no sound, so use the Zoom 
tool to get a more accurate view of the beginning of 
the wave. 


The same can be done for the end of the clip, 
but you may notice that the main actual sound 
is contained within the first half of the clip. The 


clip back, you'll see how the sound starts right at the 
beginning of the waveform. Trimming off such 
excess silence ensures the clip plays back instantly 
without any delay and removes any excess file size. 


second swell only proves to echo the initial click 
slightly and can also be trimmed. Zoom in between 
the two points and remove the tail end from as close 


Click-and-drag from just before where the 
waveform starts modulating back to the beginning 


of the clip and hit the Delete key. to the 0 amplitude line as possible. > 
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Now the clip has been trimmed of excess 


silence, you can consider reducing the sample The waveform, saved as it is, is a tiny 746 
and bit rates. 16-bit clips are generally used for high bytes. But if you convert the sample to 8-bit — = cee 
quality clips with variable frequencies such as via Edit>Convert Sample Type it drops down to 396 Finally, save your optimised clip via the menu 
general audio. You can reduce this to further bring bytes, almost 50 per cent of the original size, with bar using either the WAV (PC) or AIFF (Mac) 
down the file size of the final file no discernable decrease in quality. format ready for importing into Flash. 


Part 4: Stick it in an Envelope 


Envelopes effectively shape the amplitude of the clip, making it simpler to 
trim the silence and reduce the bit rate 


When to use Flash 


Flash provides basic Envelope 
controls. Using a dedicated 
Waveform editor is more 
effective for editing and 
optimising the original clip, while 
Flash can be used to add effects 
such as stereo panning to match 
specific visual sequences within 
the movie. 


| Smooth Release 
H| Soft Curve 


The main window here provides an overview 


With sound clips that don’t have such defined Open noisy.wav (or .aiff) and you'll hear a of how the amplitude of your clip will be 
start and end points, simply trimming the sound that has a clipped ending which needs reduced over its time period. As the beginning of 
silence isn't possible. This is where Envelopes come tidying. To change this with an Envelope, go to your clip is acceptable, you need to apply an 
into play, effectively shaping the amplitude of the Transform>Amplitude>Envelope to bring up the Envelope that fades the end of the clip only, so 
clip, creating more suitable results. required options. select the Keep Attack Only preset. 


You can further experiment with smoothing 


The Envelope Transform tool is one of many 


the line by activating the Spline Curves option G You can visually see how the Envelope has filter-like effects provided by Cool Edit. It's also 
or even dragging individual points around if this trimmed the amplitude and on playback a possible to carry out other commands, such as 
produces a more suitable result. Once you've more natural sound is produced, enabling you to adding effects and filters, reducing noise levels and 
completed your changes, click OK. trim the silence and reduce the bit rate as before. stretch samples over time without dropping pitch. 
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Part 5: Working with sound in Flash 


After editing the sounds, you can import them into Flash as 
you would any other element 


Turn it off 


To cut.a sound layer short, set the 
Sync mode to Stream and then 
add a keyframe where you want 
the clips to end and select Stop 
from the Sync options. 


Music library 


Sound clips tend to bloat your 
movie's file size, so experiment 
with tweaking existing clips held 
in the library to create aural 
variations. As well as providing 
some consistency between your 
clips it reduces the resulting 
download because less unique 
clips are required. 


Allow for 200 frames in the layer and drop the 


ra] Sounds that have been edited can be imported sound clip on to frame 1 from the library for a 


into Flash as you would any other element. As To illustrate how Flash handles and compresses _ visible representation of the waveform in the 
a sound clip is non-visual, it is generally advisable to sound, create a new file and import the timeline. This is the most basic method of adding 
create new layers for them. The timeline then drums.wav (PC) or drums.aiff (Mac) from the sound, but there are many different ways. For this 
displays the waveform so you can see how long the cover CD. This file currently weighs in at just tutorial though, let's continue to look at 
sound clip lasts over frames. under 1.2MB. optimisation methods. 


ERRNO SRT TEN snnaumsitonmen ems: rane 


4 | With your new-found awareness of Envelopes, Once complete, there are three main methods 
it's possible to carry out basic changes to the To emulate stereo effects from a mono sound of compressing audio - ADPCM, MP3 and 
waveform by clicking the Edit button on the Sound clip, invert the envelopes in the left and right Raw. Raw provides no sound compression but does 
palette. You can now click-and-drag the handles to channels to hear the clip move from one speaker to enable you to reduce file size through a variable 
affect the sound envelope, using the Zoom tools for the next. You can check the results on the resulting sample rate. By reducing this to 11kHz a passable 
finer details. SWF files found on the cover CD. quality can be achieved along with a 290K file size. 


9 | Check out the results on the cover CD which 


@ The ADPCM method enables you to 8 | The best method for your drum clip is MP3, contains all three resulting files. Like images, 
effectively trim sound clips that require which is more suitable for music streams. With Flash can only compress the highest quality results 
extreme optimisation, where loss of quality isn’t experimentation and experience, you'll figure out from the best source material. By using your new 
such an issue. This type of method is more suited for _ the most suitable bit rate. Here, reducing this sound-editing skills, there's no reason why your 
short events such as button clicks or possibly example to 16-bit resulted in the original 1.2MB audience should wait excessive amounts of time for 
speech, but isn't recommended for music. wavefile coming down to a mere 28K. noise-filled audio. 
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1. A screenshot from what is referred to as the promo area of 
Heavy. This area features a different photoshoot, or illustrations 
done by various artists, and sliding billboards. This area is also 
accompanied by a music track selected by Heavy and cleared 
with the label. People occasionally refer to this part of the site 
as ‘a screensaver’. 


2. This is a screenshot from an intro animation to the site. Here 
the Heavy team has its beloved sumo opening a can of woopass 
on the viewer. 


3. Iron Stomach is Heavy’s Director game that recently 
appeared on the front of /D magazine. Based on the timeless 
Tetris engine, competing players eat racially-specific 

food groups and vomit on each other in order to win. It's 
absolutely charming. 


4. This is a Flash-based music player that features the entire 
Gorillaz début album. Along with listening to the tracks at 
64kbps mpeg, the viewer can watch a looping animation, or 
actually load the videos into the interface using the ‘wildform’ 
technology of converting video to SWFs. As with all of Heavy's 
players, the viewer doesn't experience any buffer time, can skip 
from track to track and can fast forward and rewind with exact 
timecode accuracy. 


At [w] wwuw.heavy.com you'll find a fantastic hive of online shows, 
parodies, commentaries, music and promos in the form of 
animations, movies and more — and at the heart of it all is Flash... 


eavy started out in 1998 as Heavy Industry, a 
service business that worked with large ad 
agencies to create entertainment online for 
’ its clients. The founders David Carson and 
Simon Assaad believed that the real growth lay in 
entertainment IP and a branded network, rather than a 
service-based business, so the summer of 1999 saw 
the launch of heavy.com. 

Since then, in addition to creating and producing 
around 25 shows, Heavy has maintained its service 


business and continued to grow into the broadcast 
services field. We caught up with Creative Director 
and Network Head, Ryan Honey, to explain the 
philosophy, purpose and techniques of this 
weighty company: 

“The philosophy and purpose of Heavy is to take 
advantage of the existing broadband technology in 
order to build an entertainment brand,” says Ryan. 
“We can then use the brand we have developed 
online to secure services business and sell or > 
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Who's Heavy? 


And what software does it use? 


Heavy humans 


The are around 30 employees at Heavy, so we'll just 
stick with the core management team: 

David Carson - CEO/Chief Creative Officer 
Simon Assaad - CEO 

Ryan Honey - Creative Director/Network Head, 
Heavy.com 

Erik Blair - Creative Director Heavy Industry 
Matisse Mittleman - New Business and 

Music Initiatives 

David Pachter - President 

David Rhodes - New Business and Ad Sales 
Ken Carson - Chief Technical Officer 

Edward - Head of Finance 


Heavy hardware 

Mostly Mac G4s, some Dell and IBM PCs of various 
specifications (mainly for testing purposes and 
programmers), Avid Symphonies for the production 
of mmusa (broadcast). 


Heavy software 

Flash §, Director 8, Final Cut Pro 2, Pro Tools, 
Photoshop 6, Illustrator 9, Streamline, Quark, 
SoundEdit 16, Avid, After Effects and PHP. 


1. One of Heavy’s best-loved and highly 
characterised Flash-based animation 
series, Munchyman and Fatty. You may 
have seen this featured at the Rotterdam 
Film Festival. 


2. Screen shots from a 22-minute animated 
short that Heavy created for Maxim 
magazine - using Flash, of course. 


3. Full-screen Flash-based interface for one 
of the newer video shows, Heavypetting. 


Deep Down & Dirty 


license our programming in all avenues of the 
entertainment industry.” 

This is no hit-and-hope band of art school 
graduates with crash courses in Dreamweaver — this 
is big business. There are currently about 30 staff 
members at Heavy Inc, and almost everyone in the 
company works for both the entertainment side and 
service side. Various people work freelance for their 
video production department and there's an email 
form on the site so that those with something to offer 
can make contact. Of course, it would be a good idea 
to put solid Flash skills on your CV... 

“We use Flash for almost everything we do - 
animation, design and Website creation,” explains 
Ryan. “We have even gone so far as to animate 
broadcast graphics with Flash. We've always worked 
with Flash; it was the creation of this program that gave 
us the freedom to make more immersive 
entertainment experiences online. Even forservice 
work, we rarely take jobs that don't use Flash entirely.” 

Macromedia, are you reading? “We also use 
Director for our games for many of the same reasons 
we use Flash. If you want to create a game online, it 
really is the only tool if you wish to push the limits.” 

But how would Heavy change Flash, if at all? “The 
only thing | would change about Flash, besides the 


minor bugs that crop up, is its inability to embed 
video... | would love to do away with the pop-up 
window all together and still get the benefits of the 
video CODECs.” 

So we're pretty clear in the software solution (and 
you can check the full tools listing in the boxout), but 
what about the creativity? What has influenced the 
Heavy designers, and what can aspiring site designers 
learn from them? 

“As for the way we have laid Heavy out and the way 
it works, | don't think there have ever been any real 
influences,” muses Ryan. “We set out to make a 
Website unlike any other. As for design, | and all my 
designers visit the various design Webzines daily to 
see what is out there (k10k.com, surfstation.lu) - the 
influences are too many to mention. For me, design is 
just the regurgitation of all the things you see in your 
everyday life. 

“| think young designers can learn from Heavy that 
designing a Website doesn't have to be about making it 
feel like a Website. With current technologies, there 
are much more interesting possibilities. What they 
can't learn is how to design for modem users.” EEE 


Heavy.com’s Network Head Ryan Honey gets to the nitty-gritty with static image files, animation key frames and ActionScript... 


“Screenshot of the 
ActionScript that brings in 
the navigation. Each show 
button is inside a movie clip 
that is named sequentially.” 


“This is the basis of our site 
that resides on level 0. This 
is here for the entire 
experience because it 
houses the navigation and 
loads in the elements.” 


Flash Special 


“Here are some of the key 
frames for the sliding 
billboard. It looks a little 
sloppy here, but we've set 
it up for easy updatability.” 


“This is the promo area 
loaded into level 1 - 

we replace content at this 
level. This swf also loads 
in the streaming audio 
that accompanies the 
promo page." 


“The radio is loaded into 

level 3, and the tracks are 

loaded into a movie clip 

inside the radio player.” 
“Here is some ActionScript 
for the radio. It shows how 
we randomize the playlist 
from all four genres." 
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lash began life as a design and 
animation tool: a creative 
environment for producing fast 
: loading cross-platform vector 
graphics and animation. It was exactly this that 
made it the odds-on candidate for guiding the 
Internet forwards as a visual medium, in direct 
opposition to the GIF-JPEG monopoly, whose 
cumbersome loading times tested users’ 
patience to the limit. 


ee Which is why a collective cheer 
. 


went up the day Flash, at version 2, 


A guide to Flash 
ActionScript 


We explain the key terms and syntax in one 
essential reference guide... 


gained basic interactive features as well as 
movement. This made it possible for designers 
to include buttons and links in their movies, as 
well as stop and start play, and jump frames. 
More sophisticated interactive and 
movie control techniques have been included 
with each subsequent release, alongside 
fast-evolving tools for writing the codes needed 
to implement them. Today's Flash 5 has a fully 
featured scripting language with the power of 
JavaScript. It is no accident, either, that the 
terms and syntax of this new language, > 
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ActionScript, are 90 per cent the same 
as those of JavaScript or DHTML, the 
main exception being that instead of 
dealing with documents, layers, forms 
and so on, you've got Movie clips instead: 
mini Flash movies embedded within the 
overall Flash file. 

This, together with Flash 5's 
ultra-friendly Script Editor, makes it 
exceptionally easy for anyone with any 
knowledge of JavaScript to write their own 
impressive ActionScript codes, and vice 
versa. This is a great boon to designers 
such as yourself, whose idea of a great 
Website isn't just how it looks, but also the 
way it interacts with your viewer. Even the 
most code-aphobic should have no 
trouble dealing with three-liners such as 

on (release) { 
gotoAndStop (10); 
} 
or 
ifFrameLoaded (10) { 
play (); 
} 


Small 
beginnings 
such as these quickly grow to greater 
things, as you become more confident 
with the language. And although today 
Flash is as much a design studio as a code 
authoring tool, code is truly its forte, but 
it's your choice whether to use it or not. 

V5's new JavaScript modelis also a 
blessing for anyone who struggled in Flash 
4with curiosities such as the set Variable 
and tellTarget phenomenae. ActionScript 
now dispenses with such nonsense in 
favour of a more traditional, and 
convenient, syntax where = sets a variable 
and dot syntax picks out a path to the 
object you'd like to reference, among 
other things. 

The rest of this feature is a reference 
to use when you're working with 
ActionScripts, and come across 
something you can't get to work, or don't 
understand. We take each of the key terms 
and groups of the language and explain 


how, why, where and when to use them in 
your codes, as well as give examples of 
what you can do with them. We haven't 
included every last key word - there are 
far too many inall - but similar terms 
behave in similar ways, so if you can't find 
one, pick out another that is similar. 

If you’re more of a newcomer, or get 
stuck at any point, browse the boxouts, 
where we explain more about how a group 
of terms and their syntax behave, as well 
as their uses and some pitfalls to avoid. 
And finally, if you still can't get things 
going, post a message at our forum: 

[w] www.computerarts.co.uk/forum. 


Movie clips and targets 

Movie clips are at the heart of Flash 
dynamics: each Movie clip is a mini Flash 
movie in itself, including chunks of 
graphic, code, sound, its own timeline and 
so on, which you can place in your main 
Flash movie, and then direct with 
ActionScript. You can change Movie clips’ 
appearance and position, send them 


information, get 
information back, and so 
on. To create a Movie clip, simply select 
something on your stage, hit F8, and then 
hit Return. 

Like folders in your Website, any movie 
clip can contain further Movie clips, and 
so on almost ad infinitum. 

If you want to do anything dynamic with 
a Movie clip, you need to name it in your 
Instance palette so that ActionScript 
knows which clip you’re referring to. 

The similarity with folders doesn't end 
here: you reference a folder using a path — 
“images/navigation/homebuttom.gif”, 
for example. In ActionScript, you state 
which Movie clip you're talking about 
using a path containing all the clips you 
need to go through to get there, similar to 
an address: UK>London>Oxford 
Street>Number 24. 

Imagine, for example, you have a Flash 
movie containing a clip called leftcolumn. 
Inside this clip, you have another called 
scrollingbit, and inside that you have one 
called textarea. Then if you want to send 
an ActionScript instruction from your 


main movie to the textarea clip, you can 
use the pathname: 
“leftcolumn/scollingbit/textarea” 
This is just like folders. Flash 5, however, 
introduces and prefers you to use dot 
syntax (which is more closely related to 
other scripting languages), where you 
simply replace / with .: 
leftcolumn.scrollingbit.textarea 
Again, like folders, you can either make 
your path relative, which makes it obvious 
how to get there from whichever clip holds 
the script, or absolute, which explains how 
to get there from the main Flash movie. 
If, for instance, you need to go up 
one movie clip into the container, 
before you can burrow down again, use 
the term _parent: 
_parent.scrollingbit.textarea 
If your Flash file becomes complex, you 
may just want to go absolute. In this case, 
use _ root: 
_root.leftcolumn.scrollingbit.textarea 
It's important to make sure all 
your Movie clips, at least within 


the same containing clip, have unique 
names, as with folders, so that it’s clear to 
the Flash Player which one is which. 

It's also important not to confuse the 
name of your Movie clip symbol (given in 
the Convert To Symbol dialog) with the 
name of your actual Movie clip, or Movie 
clip instance as it should really be called. 
Permit us just to use the word clip — that 
way things won't get laborious. Give your 
clip name in the Instance palette. 


Levels 

Flash movies can contain other Flash 
movies in the form of clips. But you can 
also have several different Flash movies 
open at once, on different levels. 

For instance, a Flash movie by default 
loads into the first level, or level 0. This 
could be your main interface. 

Another Flash movie loaded onto level 
1, appears over the top — this could be 

your main page. And so on 


with level 2, level 3... When the user clicks 
a button on your main interface, you can 
load a new file into level, 
which replaces the old file on 
level 1, but doesn't affect any 
other levels. 

If you load a new file 
onto level 0, however, all 
levels are unloaded. You 
cansend ActionScript 
instructions between 
levels: just begin the path 
with _levelname, 
for example: 

_level1.leftcolumn.scrollingbit.textarea 


Variables, strings and 
expressions 
You may have noticed above that we wrote 
“leftcolumn/scollingbit/textarea”, and 
then leftcolumn.scrollingbit.textarea, 
omitting the quote marks completely. 

This isn't a mistake. Flash 4 liked paths 
to be written as strings - just as you write a 
Web address in JavaScript. But Flash 5 


just ignores the \ - so if you want a \ in 
your string, you do have to write \\. 

So what's an expression? Imagine, if 
you will, that Bob’s surname is 
Andrews, stored in a variable 
surname="Andrews’. We can give 

Flash an expression to update our 
text variable to include this: 
text = text+"Andrews” 
The expression part is text+” 
Andrews’, and the result is “My 
name is Bob Andrews”. The point 
is, while a string is something you 
just give Flash‘as is’, an expression 
suggests some code, maths or logic 
to perform. 
For example, imagine that Bob has just 
had his birthday, so he’s now a year older. 
age = age + "1" 
Actually, this is going horribly wrong. 
Before, we set age="26”, and now in the 
same way as we added “Andrews”, we've 
added “1”, and the result is age="261”. The 
expression has treated the parts as 
strings, not mathematical numbers: if you 


easiest way to convert your string to an 
expression is to use the eval() command, 
which evaluates the content of the string 
(dispensing with the quote marks): 
eval(clipname)._x=50 


Properties and actions 

This is really where the action begins: 
getting and sending information and 
instructions between Movie clips 
and ActionScripts. 

Imagine you've got a graphic you want 
to move 10 pixels to the right every time 
your user clicks a button. You could do this 
with a mass of keyframes, the graphic at a 
different position on each, and a button 
with the action: 

on(release){nextFrame()} 
However, eventually you're going to run 
out of keyframes, and things won't work 
quite the way you'd like them to. Instead, 
try turning the graphic into a clip called 
movingthing, and use an action which says 
‘get the x position of moving thing, add 10 
on, then tell moving thing to go there’. 


You can also do the same with actions, 

such as gotoAndPlay, if you want to tell a 

particular clip to play from frame 10, 

for example: 
movingthing.gotoAndPlay(10) 

If you leave off the name of the clip (and 

the .), then the action simply applies to the 

current clip, which goes by the alias this. 

So you could write.. 
this.gotoAndPlay(10). 

This may seem superfluous, but it’s 

worth knowing, because as your scripts 

become more complex, the term ‘this’ 

becomes more important. 


Conditions 

Back to our moving thing... Ideally, we'd 
like this to move smoothly, without going 
beyond the edge of the main movie stage. 
Firstly, we need a frame loop, not to be 
confused with code loop, such as 
do...whileQ. 


Ina frame loop, A 
) 


treats Movie clips more like objects, and 
by and large prefers you to write their 
names as expressions, not strings. 

In short, a string is character or series 
of characters, which you can give to Flash 
‘as is’. Examples are “Bob”, “My name is 
Bob”, “http://www.computerarts.co.uk” 
and “26”. You can store these ina variable, 
by writing something like text="My name 
is Bob”, age="26”, and so on. Or you can 
give them as part of a command: 

trace(“My name is Bob”) 
gives a pop-up window saying just that, in 
your test environment. 

The cunning thing about variables is 
that you can use them to store, send, share 
and receive bits of info between 
commands, clips and files and so on. 

For instance: 

text="My name is Bob” 

trace(text) 
does just the same as the line above. Once 
you've set a variable in this way, it’s there 
for good — well, almost. 

Incidentally, if you want to include a 
quote mark in your string, write it as \”, so 
as not to confuse the quote with the end of 
the string: text="Bob says \"Hi.\””. Flash 


want to store numbers ina variable, which 
most people do, you need to store them as 
expressions themselves, or in other words, 
without quote marks: 

age=26 

age=age+1 
Gives the result age=27. Perfect. 

If, for some reason you get your strings 
and expressions in a muddle, Flash does 
its best to work out what it is you want to 
do, and convert your variable to the right 
format. For instance, code like this is 
perfectly acceptable: 

fate 

clipname = “leftcolumn"+i; 

setProperty (clipname, _x, 50); 
This sets the variable 
clipname="leftcolumn1” by automatically 
converting | to a string, and then moves 
the Movie clip with that name 50 pixels 
along the x-axis. However, if you try this, 
using newer syntax: 

ist; 

clipname = “leftcolumn"+i; 

clipname. _x=50 
You'll get stuck: Flash is looking for the 
name of a Movie clip as an expression, 
whereas “leftcolumn1’ is a string. The 


A quick browse through your Editor menus 
will reveal two actions, getProperty and 
setProperty, which do this: 

xpos=getProperty (“movingthing”, _x) 

xpos=xpos+10 

setProperty(“movingthing”,_x,xpos) 
This works fine: _x is Flash’s name for the x 
position property of a clip, movingthing is 
the right path to the clip (we assume), and 
we've stored that bit of info in a variable 
xpos. We add 10 to it, then use the 
setProperty to move the clip there, giving 
xpos as an expression. 

But this method is dull and laborious, 
and Flash 5's dot syntax gives us a better 
way to do it: 

xpos=movingthing. x 

xpos=xpos+10 

movingthing. x=xpos 
Much better: treating movingthing as an 
object, we can pick up and set its property 
just like that. Even better, we can write: 

movingthing. x+=10 
+=n just means add n on;so if iis 10, 
i+=10 gives i=20, which is dead easy. 

You can do all this with any property 
that you can set, including _ y fory 
position, _width for width, and so on. 


you create two keyframes side by side. 

On the first, put your main actions, and 
then on the second, put the actions 
prevFrame(); play();. (One line is fine if 

you have semicolons). This sends the 
timeline back to repeat the previous frame 
over and over. 

On the previous frame, then, you put 
your code _movingthing._x+=10. This 
keeps things going continuously. On the 
button, you want a on(press){playQ)} and 
on(release){stop0}, to set the loop in 
motion, then stop it as and when. 

Your moving graphic will, however, 
continue past the end of the stage, and on 
into the ether ad infinintum. 

You need to check where it is and only 
move it if it hasn't gone too far - which we 
check by looking at the width of the main 
movie, or the root. This demands an if() 
statement: 

if (movingthing._x <_root._width){ 

_movingthing._x+=1 

} 
An ifQ statement works by checking the 
condition in brackets, and carrying out the 
commands between the {... } if allis well 
there. For instance, you can check > 
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if(_movingthing._x>0), which looks to see 
if the clip is to the right of the left edge of 
the movie. 

You can also check the value of a string 
— forinstance, Is the name bob? — by 
writing something like: 

if(name=="bob"){gotoAndStop(22)} 
Note the =. This isn't a printing error: 
it’s two = signs together, which Flash 
calls the equality operator, and you need 
to use these wherever you are checking 
whether strings, variables, expressions 
and so on are the same. 

The same goes for numbers - 
iffage==26) — properties — 
if(clip._x==50), and so on. 

There are a variety of other operators 
you can use, in addition to <, > and ==. 
The most important are !=, which means 
not-equals, &&, which means and in the 
sense of if(name=="bob” && age==20), 
and ||, which means, or in the same way. 

So far we've covered the basics and 


the core syntax: 

experiment with 

the code and 

techniques we've 

shown here, and 

soon you'll be creating 

sophisticated ActionScripts capable of 
bringing far more to your Flash movies 
than a ton of tweening. 

Nevertheless, ActionScript is a clever 
and powerful language, and there is much 
we have barely touched upon. 

You might also want to read up on 
predefined objects and functions in Flash, 
including XML, string and math 
operations; and also how to create your 
own objects and functions. 


Basic actions 


Most of these actions can be used with 
dot syntax if you want to send the 
command to a different Movie clip, in the 
form targetpath.action() — for example 
myclip.loadMovie(link). This is an 
alternative to tellTarget(). In some cases, 
where the form given here includes a 
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target within the brackets (or arguments), 
you can leave this out. 


Go To 

As simple as it sounds: this item in the 
menu accesses a variety of different 
codes for jumping between frames and 
scenes, listed here... 


gotoAndPlay(scene, frame) 

Set the current timeline to play from the 
specified scene and frame. If you want to 
stay in the same scene, just give 
gotoAndPlay(frame), ignore scene. 

How: Just choose Go To action. Use the 
Type dropdown to choose whether you're 
giving a number, a name or an expression 
forthe frame. 

In hand coding, a frame number is an 
expression (no quotes), a name is a string 
(quotes). The scene is always 
a string, as in “Scene 1”. 

You can target other 


Movie clips using targetpath. 
gotoAndPlay(scene,frame). 
Example use: Skip intro. 


gotoAndStop (scene,frame) 
Exactly the same as gotoAndPlay, but 
stops at the destination. 

A following play) command overrides 
the stop. 
How: Choose Go To and uncheck the box 
at the bottom of your Editor. 
Example use: Add to a button with an 
on(event) command (see below) to change 
the appearance of a static interface when 
your viewer clicks it. 


nextScene() 

Movie jumps to frame 1 of next scene 
and stops. 

How: Choose Go To and use the Scene 
dropdown to set this command. There are 
no options. Use a play() command on the 
next line to override the stop. 


prevScene() 
The same as nextScene, but jumps to 
frame 1 of the previous scene. 


nextFrame() 

Stops at next frame off timeline. 

How: Choose Go To, then use the Type 
dropdown to set this. Use a play() 
command to continue play. 


prevFrame() 
The same as nextFrame(), but goes 
back one. 


play() 

Sets timeline in motion. 

How: Choose Play from the Basics or 
Actions menu. There are no options. 
Example: Add to button on(rollOver), 
together with a stop() action on(rollOut), so 
your viewer can control movie play. 


toggleHighQuality() 
This simply turns 
anti-aliasing on or off in 
your Flash movie — 
there are no options. 


Anti-aliasing looks better, but slows 
things down. 

Example use: The most obvious use is to 
give your user a button to speed things up 
a bit if your Flash movie is running too 
slowly on their system. 


stopAllSounds() 

Stops sounds playing, but doesn't actually 
turn the sound off: streaming sounds will 
resume, and future sounds will play too. 
How: To have a sound on/off feature, give 
the user a way to set a variable sound=1 or 
0, which you combine with if() commands 
wherever you have a sound. clip. See 
conditions in main text. 


getUrl(link) 

The classic link, like <A 
href="newpage.htm”> in HTML, loads a 
new file into the browser window. If you 
just want to load a new Flash movie into 
the same page, use loadMovie() instead. 
How: You don't have to use it ona button. 
For a simple link just fill in the URL field — 
hand coders, this should be a string. You 
can also use an expression, for instance a 


variable set earlier, such as 
getUrl(nextpage), where 
nextpage="newpage.htm”. 

To control the window or frame your 
new page opens in, for instance a new 
window, or a navigation frame, set this 
using the Window dropdown, using the 
same value as you would in HTML, _ blank 
for example. 

Again, this is a string, and the syntax is 
like getUrl(“newpage.htm”,”_ blank’). 

You can also send variable information 
to the new page, as with an HTML form, 
using either the GET or POST method. 

However, you don't need a form in 
Flash; all the variables in the movie are 
sent, which could include information on 
whether a user clicked a particular 
button, or where they dragged a Movie 
clip to, for example. 

GET sends the information as part 
of the URL, such as, newpage.htm?name= 
bob&city=London, while POST sends it 


invisibly in the http header. 

The method is a string: the syntax is 
getUrl(“newpage.htm”,”_self”,”"GET”). 
(Use the target _self to keep things in the 
same window). 

Example use: Link userto an HTML page. 


loadMovieNumi(link, level) 
Loads a new swf file into the Flash Player 
or plug-in, either replacing or over the top 
of an existing swf file. 
How: Choose Load Movie from Basics. As 
with getUrl, you can choose where the file 
loads, but you are choosing which level, 
rather than window. 

The default is level 0, which replaces 
the current movie. Movies on other 
levels appear on top of this, but you can 
only have one movie per level: new 
replaces old. 

As with getUrl, the urlis a string; 
just give the number of the level as an 
expression. 

You can also send variables using 
GET or POST, but they transfer directly 
into the swf file. The syntax is, 
loadMovieNum(‘newfile.swf”,0,”GET”). 


Example use: Load new 
Flash movie; load main 
content over basic interface 
on level 0. 


loadMovie(link,target) 

Same as loadMovieNum(), but loads 

a new file into a specified Movie clip, 
the target. 

How: Choose Load Movie from Basics, 
then select Target from Location 
dropdown. Give target path to Movie 
clip, as string to be safe. GET and POST 
methods available for sending variables, 
using syntax like, loadMovie(“newfile. 
swf”,"movieclip1”, "GET”). 

Example use: Change content ina 
particular interface area, depending on 
user input. 


unloadMovieNum(level) 
Removes movie from a level. If level is 0 
you get a blank player. 


_x=_x+10 

} 

If you're stuck on getting this to 

work, read the main article where 

targets and levels are mentioned. Note, 

however, that tellTarget is a hangover from 

Flash 4, and there are two preferable 

alternatives. One is to send the command 

direct using dot syntax: 
movieclip1.gotoAndPlay(10) 

This achieves the same as the three-Line 

tellTarget line above. You could also write: 
movieclip1.i=movieclip1.i+1 

This adds 1 to a variable 1 stored in aclip 

called movieclip 1. 

Notice that in both of these cases, the 
name of the clip is an expression, and has 
no quotes, while with tellTarget the name 
of the clip is, traditionally, a string. If there 
are several things you want to do with the 
target Movie clip, use the with command. 
Example use: When the user clicks a 
button, this changes the position of an 


Properties 


Traditionally you would get a property 
using the getProperty() function, as in 
variable=getProperty(target, property), 
and set it using setProperty(target, 
property,value), where target is the path, 
and both target and value are strings. 

In Flash 5, however, you can get the 
property with variable=target.property, 
and set it using target.property=value. 

The target path in these cases is an 
expression: use eval() to convert from a 
string if you need to. 

To write a simple a=b form line in 
Normal mode, choose Evaluate from the 
Actions menu. 


_alpha 

Opacity/transparency property, 
corresponding to Alpha in your Effects 
palette. The higher the value, the less 
transparent it is. 


_focusrect 

Either true or false, you can use this 

set whether the button that has focus 

has a yellow rectangle highlighting it. 
How: _ focusrect=1 turns this feature on, 0 
for off. 


_framesloaded 


Tells you how many frames of the movie 
have been loaded. 


CUE) 


How: Choose Unload Movie from your 
Basics menu, specify level number as 
expression. If you choose Target from the 
location dropdown you get... 


unloadMovie(target) 

Removes a file previously loaded into a 
named Movie clip. 

How: Choose Unload Movie, select Target 
from Location dropdown, and specify path 
to clip as a string. 


tellTarget(target){...} 
Use to send commands to another Movie 
clip: any commands within the curly 
brackets apply to the Movie clip specified 
by your target path. 
Why? ActionScripts only apply to the 
timeline or clip in which they are written, 
unless you specify otherwise. This 
includes commands like play(), variables, 
properties and more. 
How: Choose Tell Target, and then set the 
path as a string. Put your commands 
between the brackets: 
tell Target(“movieclip1"){ 
gotoAndPlay(10) 


interface element, set 
upasaclip. 


on(event){...} 
The key to interaction: a group of 
‘event handlers’ to go on button, mostly 
mouse events. 
How: In Normal mode, Flash 
automatically adds an on(releaseX...} 
when you add a new action to a button. 

You can just use the check boxes to 
choose which event(s) you want to handle. 
For multiple events the syntax is like 
on(release, releaseOutside, and so on). 

There are three main points to 
consider here: 

Firstly, actions on a button must be 
within an event handler, otherwise you'll 
get an error. 

Secondly, if you want to test an event 
like the onmousemove of JavaScript, use 
onClipEvent - see Actions. 

Thirdly, always test your buttons with 
dragging off and over, release outside, and 
so on, just to make sure they are working. 


Example use: myclip._alpha=20 sets 
myclip to 20 per cent opacity. 


_currentframe 

Gets the current frame of the movieclip. 
Example use: frame=_currentframe or 
frame=this._currentframe all set the 
variable frame to whatever frame the same 
timeline is on at that moment. Itis a 
number, nota string. 


_droptarget 

After using a startdrag() action to drag one 
Movie clip, this property tells you which 
other clip it was dropped on. 

How: thetarget=dragclip._droptarget 
sets thetarget to a string with the 

absolute path of the drop target, in slash 
syntax - “/clip1” for instance. 

If you want to do much with it, you’re 
best to use thetarget=eval 
(dragclip._droptarget), which converts the 
result into an object reference you can use 
as a pathname in dot syntax. 

To get the name of the drop target, 
then, you would use thetarget._name (see 
‘_name' on the right). 


Example use: Use with _totalframes to 
test whether the movie has completed 
loading, orto create a percentage bar 
for users. 


_height 

Sets or gives the height of a Movie clip. 
How: _ height is the height of the current 
clip, target._height is the height of the 
target clip, _root._height is the height of 
your main movie. 


_highquality 

Values 0 to 2 control the quality of 
anti-aliasing and smoothing of your movie, 
2 being the best. 

How: _highquality=2 sets it to the best. 


_hame 

Sets or gives the name of the Movie 
clip. target._name gives the name of 
the target. 


_quality 

Like _highquality, but sets uses four 
string values: “LOW”, “MEDIUM”, “HIGH” 
and “BEST” > 
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_rotation 
Like _height, but is the rotation property. 


_soundbuftime 

Sets the number of seconds to buffer 
streaming sound files before they start 
playing. Five seconds is the default. 


_target 

Gives the target path. 

How: For instance, thepath=this._target 
sets the variable thepath as the absolute 
path to the current clip, as a slash-format 
string, Use thepath=eval(this._target) to a 
reference you can use in place of dot 
syntax, or thepath=targetpath(this) — a 
function — to get the action dot 

syntax path. 


_totalframes 

Gives the number of frames of the 
Movie clip. 

Example use: if(_framesloaded<_ 


totalframes){gotoAndPlay(1)} 
loops the clip back until it has 
completely loaded. 


100°_framesloaded/_totalframes 
gives the percentage that has 
been loaded. 


_url 
Gives the address of the swf file the clip 
was loaded from. 


_visible 

Either true or false, 1 or 0, this sets or gives 
the visibility of a clip. 

Example use: myclip._visible=0 hides 
myclip. 


_width 
Like _height, but sets or gives the width of 
aclip. 


_x 

Sets or gives the x position of a clip’s 
registration point relative to the local 
co-ordinate system of its parent clip, soa 


transformation to the parent clip may 


move the | 


clip without affecting its 
_x value. For the main movie, the 
registration point is 0,0. 


_xmouse 

Gives the x position of the mouse 

cursor, relative to the registration point 
of the clip. 

How: If you want this figure to be relative 
to the top-left corner of your Flash movie, 
get this property from your main timeline. 


_xscale 

Sets or gives the width scaling of a clip in 
percentage points. This also scales its 
internal co-ordinate system. 


= f 


As _x, but for y position. 


_ymouse 
As _xmouse, 
but instead 
refers to the 
mouse's y position. 


_yscale 
As _xscale, but fory scaling. 


Actions 
break 


Breaks out of a for, while or similar loop, 
and jumps to the next command. 
Example use: Simplify coding where a 
conditional loop needs to test a complex 
range of conditions. 


call(frame) 
Executes ActionScripts on the given 


frame, without the playhead going there. 


How: Give a frame number as an 


expression, name as a string. 


Example use: Put scripts you often use 
ina single movie ona frame that 
doesn't get played, then call from 


where you need them. Flash 5 prefers 
function( however. 


// comment 

// atthe beginning of a line comments 
out the content, so you can leave 
messages in the code, or temporarily 
disable certain lines, which is useful 

for testing. 

Example use: Always use comments in 
longer scripts, otherwise when you return 
at a later date, you won't remember what 
does what. 


delete <object or variable> 
Deletes the named object or variable, 
if possible. Use to free up memory in 
complex scripts. 


do { ... } while(condition) 
Repeats commands in curly brackets 
foras long as the given condition is 
true. Compare to for‘). 


How: Remember to use conditional 
operators for the condition, as you would 
with an if clause. So that’s ==, not =, && 
for and, and || for or. 
Example use: Apply an operation to all 
members of an array. This adds 1 to every 
figure in the array age: 

age=new Array(22,23,53,42) 

i=0 

dof{age[i]+=1; i++} 

while(i<age.length) 


duplicateMovieClip 

(target, newname,depth) 
Creates a copy of the target clip, with 
the given new name and depth. Only one 
clip can have any one depth — new 
replaces old. 

How: Dot syntax expression or slash 
syntax string for target; newname is a 
string, depth is an expression. You can 
also use the target.duplicateMovieClip 
(newname,depth) syntax. 

Example use: Good for creating 
impressive, on-the-fly effects with 
‘procreating’ graphics, for example. Ideal 
in Flash 3D engines and more... 


elsef...} 

Following an if() statement, commands in 
the curly brackets only happen if all if) 
and else if) conditions were false. See if) 
for more. 


else if(condition){...} 

Following an if() statement — commands in 
the curly brackets happen only if the if() 
condition and all preceding else if() 
conditions are false. Remember to use 
conditional operators, like == and && in 
your condition. 


evaluate 

Not to be confused with 

eval(), this simply 
enables you 


to handwrite a line of code, such as 
name="bob”, in Normal mode. 


for(start;condition,next){...} 
The for statement sets a variable (start), 
and loops through commands in-between 
the curly brackets, executing the next 
statement each time, for as long as the 
condition is true. 
How: It’s simplerthan it sounds, and much 
like the do...while loop. This adds 1 to 
every member of the array age: 

age=new Array(22,23,53,42) 

for(i=0;i<age.length;i++){age[i]++} 
age.length gives the length of the array, 
while i++ has the same result here as 
i=i+1 ori+=1. Remember to use =, && 
and so on for the condition. 


for(variable in object){...} 
lterates through all the children of the 
named object, including variables, movie 
clips and so on. 

Example use: Sounds a bit complex, but is 
very useful, particularly for making 
changes to a whole group of objects 
without having to remember what they are 


all called. To understand it, think of the 
word ‘for’ as meaning ‘for each’: 
myclip=_root 
for(item in myclip){ 


if((typeof(myclip[item])=="movieclip" 
mM 
myclip[item]._x += 10 
My 
First we say myclip means the _root, or 
main movie. 

Then the code says, for every item in 
myclip (or it could just as well have been 
for every bob, ior raspberry: it’s just the 
name of a variable), see if it's a movieclip, 
and if so move it 10 pixels to the right. 


function 
functionname(arguments){...} 
A function holds a group of commands 
that don't execute immediately, but the 
player holds in memory. You can then ask 
them to perform them at any time, and as 


often as you need, 
which is good for chunks 
of code that you need to 
use several times over, 
as an alternative to the 
call() action. 

Typically, you send 
certain information 
over with your call — such as what to 
perform the command on — and the 
function sends them back, or returns 
an answer. 

Example use: Imagine you want a function 
that moves a clip 10 pixels to the right, but 
you don't know up front which clip itis. You 
also want the function to send you back 
the new position. 

You define the function like this, where 
theclip is just a temporary variable: 

function moveClip(theclip){ 
theclip._x+=10 
return theclip. x 
} 
Then to call the function, you write a line 
like this, where the line in brackets is the 
target path to the clip you want to move: 
newXpos=moveclip(myclip) 


=. 


The result is that theclip called myclip is 
moved, and the variable newXpos is set to 
the value of its new x position. 


if(condition){...} 
Only performs the commands in curly 
brackets if the condition is true. 
Remember to use conditional operators 
like = and &&. 
Example use: This tells a Movie clip 
containing sound files to play only ifa 
variable playsounds is set to 1, otherwise it 
unloads the clip to save memory. 
You can let the user control this 
variable with a button: 
if(playsounds==1){ soundclip.play() } 
else{ soundclip.removeMovieClip() } 


ifFrameLoaded(frame){...} 

Only performs commands in curly 
brackets if the given frame is loaded. 

How: A frame number is an expression, 
named a string. You can specify a different 


scene with ifframeLoaded 
(scene,frame), where scene is a name 
and string. Most commonly used 
with a frame loop. 


#include “filename” 
Includes the named file when you export 
your movie. Useful for template work. 


loadVariables(link,target, 
method) 
Works like loadMovie0, see Basic actions, 
but loadVariables loads URL-encoded 
variable information from text files 
(although the extension need not be .txt), 
which you can use to update your movie's 
content externally. 

Especially useful with ASP or 
another dynamic server technology. 
Use onClipEvent to test when the data 
has loaded. 


onClipEvent(event){...} 

Event handlers for using on Movie clips, 
including load (when the clip has loaded), 
data (when a loadVariables action has 
completed), mousemove, and others. 


print(target, bounding), 
printAsBitmap(target, 
bounding) 

Prints the specified target. 

How: Use printAsBitmap0 for highest 
resolution, or for transparency and 
colour effects. 

Use printNum or printAsBitMapNum to 
print a level, where you give the level 
rather than target as an expression. 
Bounding is “bmovie” by default — 
check the Flash documentation for 
other options. 


removeMovieClip(target) 
Removes the move clip you ask it to — 
good for saving memory. 


return 
Tells a function what value to return. 


Set variable — set(variable, 
value) 


In Normal mode, use this menu command 
sets any variable. 

In Expert mode, you can use this syntax 
to set a variable where the name of the 
variable is an expression, for instance 
where the variable name depends on 
other factors. Usually it’s better to use an 
array if you can. 

Example use: 
i=1;set(“name"+i,"bob") sets 
name1="bob" 


setProperty(target, property, 

value) 

An old way to set the property of a clip. In 

Flash 5 you can just use the 

target.property=value syntax. 

How: target and value are both strings, 

which the property is an expression — 

see ‘properties’. 

Example use: 
setProperty(“clip1.clip2",_x,"50") 


startDrag(target) 

Anexcellent shortcut for making 

clips draggable. 

How: Specify the target. To set the clip’s 


center point to the cursor, set 
startDrag(target,true). 

To constrain the drag space to a certain 
rectangular area, set startDrag (“a”, 
true/false, left, top, right, bottom), where 
the border numbers are all expressions 
in pixels. 


stopDrag() 

This term finishes a drag action. Use 
_droptarget property to see which 
Movie clip the dragged clip was 
dropped over. 


trace(message) 
Shows a message in the output 
window when you're testing your movie. 
Typically, this is used this for 
debugging, and usually you'd use a 
variable as an expression for the 
message, but you could also write a 
note to yourself, something like, “Yup, it 
works this far.” 


var <variablename> 

Used for setting a local variable within a 
function, loop and so on. The variable is 
automatically deleted afterwards. 


while(condition){...} 
Loops through the commands in the 
curly brackets for as long as the condition 
is true. 
Example use: this calculates 2°2°2°... 100 
times over, or 2 to the power 100, forthe 
variable x: 

x=2;i=1 

while(i<100){x=x* 2;i++} 


with(object){...} 
Main purpose is to replace tellTarget(). 
Set the object as a target path, and then all 
commands within the curly brackets apply 
to that object. 
Example use: This moves clip1 10 pixels to 
the right and down: 

with(clip1){_x+=10; y+=10} GEIS 
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Creating gravity 


with ActionScript... 


Don't defy gravity — you can use it to amazing effect ~ 


have to be a skilled artist and an 
excellent programmer. Being able to 


here are millions of effects 
you can achieve with 
ActionScript, ranging from 

e database integration to 
complex physics and movement. A good 
designer knows not only how to apply 
code, but also understands its actions 
within the movie. The industry today 
demands a lot from a Flash designer: you 


enough. Web work is demanding more 
from your movies, asking for complex 
interaction, animation and information 
organisation. If you’re new to 


of this tutorial is to demonstrate how to 


design and animate graphics is no longer 


ActionScripting, don't worry, the purpose 


use a little maths, a touch of physics and 
a liberal dose of imagination to add 
amazing effects. Firstly, we'll take you 
through creating the structure of the 
movie, including graphics and frames. 
Then we'll show you how to adda scroll 
bar to visually control your gravitational 


effect. Finally, we tell you the code you 
need to create the illusion of gravity. 


Part 1: Framework 
Laying out a solid structure can be crucial to the functionality of your movie 


Plan it 


Planning your movie on paper 


helps immeasurably. Write a flow 
diagram linking the various 
scenes and interactions involved. 
This can then be broken down 
further into smaller modules. This 
approach to movie design not 
only provides you with a visual 
reference for the work flow, but 
also makes it easier when it 


comes to explaining movie 
elements to others. If you work as 


part of team ona project, this ae Here you'll create three layers and place them 
in correct stacking order, for example, the 


shadow layer is beneath the ball. 


simplifies the entire process. 


The next step in setting up the movie is to 
create your main clips (the ball and shadow). 


The last layer is for frame actions. Four 
frames are used with the following code 

inserted on the first frame. This code declares the 
variables for the movie and works out the radius of 
the ball by taking its width and dividing by two. 
This tells the movie when the edge of the ball 
touches the co-ordinate limits. 
This works out the radius of your ball: 

ball_width = getProperty(“ball", _width)/2; 
Declared variables for top and bottom, 
and so on: 

top = 10; 

bottom = 360; 

gravity = 15; 

friction = 8; 
Marker to see if drag bar is being dragged: 

is_drag_true = false; 


Part 2: Create the shadow 


Give the movie more realism by adding an intelligent shadow for the ball 


Little touches 


Clever, intelligent touches 
can really bring your movie to 


life. Shadows, lights, reflections 
and highlights can really add an 


extra dimension to your work. 


Just remember to be careful with 
file size. 


Each frame is given a stop command to hold 

position when the timeline jumps. On each 
successive frame, you need to reduce the size of the 
ball by one third — this makes the shadow appear to 
shrink and grow if you move the timeline. 


stop(); 


g shadow. This enables you to animate the 
shadow when the ball rises and falls. 


Flash Special 


Here you're going to add the code to the 
shadow movie clip in the main timeline. This 
works out the ball’s position on the screen and 
returns its Y value. This value is then checked and 
the shadow clip is told to go to the corresponding 
frame depending on the ball height. 
The ‘_visible’ property is used to make the shadow 
disappear and re-appear depending on the height 
of the ball. 
onClipEvent (enterFrame) { 
where_is_ball = getProperty(_root.ball, _y); 
if (where_is_ball<330) { 
tellTarget (_root.shadow) { 
gotoAndStop (1); 
} 


} 
if (where_is_ball<290) { 
setProperty(_root.shadow, _ Visible, 1) 
tellTarget (_root.bot_shadow) { 
gotoAndStop (2); 
} 


} 
if (where_is_ball<250) { 
tellTarget (_root.shadow) { 
gotoAndStop (3); 
} 


} 
if(where_is_ball < 70){ 
setProperty(_root.shadow, _ Visible, 0)} 
} 


Part 3: Create the scroll bar 


Create a scrollbar to visually adjust the force of gravity applied to the ball 


Creating 
Interaction 


Giving users a chance to 

change elements in the movie 
can really grab their attention. Be 
careful not to over-complicate 
things though. 


ay A bar and drag box are created here for the 


scroll bar. 


The scroll box must be a movie clip with a 
button on the first frame. The following code is 
applied to restrain the box to the scroll bar when 
pressed and dragged. This creates the illusion that 
the drag box is restrained within the bar. 
on (press) { 
_root.is_drag_true == true; 
startDrag (“", false, -84, -254, 38, -254); 


on (release) { 

_root.is_drag_true == false; 
stopDrag (); 

} 


The scroll bar movie clip needs to constantly 
know the position of the drag bar to evaluate 
the gravitational value to apply to the ball. The 
following code is entered as a clip event for the 
scroll bar in the main timeline. 
onClipEvent (enterFrame) { 
if (Number(is_drag_true) == false) { 
_root.gravity = 
getProperty(“_root.scrollbar.drag_box”, _x)/2.5; 
} 


} 


Part 4: Core code 


How to apply the main bulk of code to your movie 


Tip 


ActionScript can get pretty 
confusing at times —do yourself 
a favour and do these two things. 
Firstly, always use meaningful 
variable names: this helps you 
locate things faster. Secondly, 
always (and this is essential) 
comment your code. Even if 
you're experimenting, if you 
find something that works, 
commentit. 


o It's good practice to develop modules for 
ActionScript which you can later call in the 
main movie. Create a fourth frame in the actions 
layer labelled ‘main_code'and apply the following: 
Pointer: 
y_marker = y; 
Get ball y position: 
y = getProperty(“_root.ball”, _y); 
Is dragging true?: 
if (Number(is_drag_true) == true) { 
velocity = (y-y_marker)*10; 
Is dragging false?: 
}else if (Number(is_drag_true) == false) { 
Check screen boundaries to see if it hits the bottom: 
if(Number((Number(y)+Number(ball_width)))>= 
Number(bottom)) { 
y = bottom-ball_width; 
velocity = -velocity* friction; 


Check screen boundries to see if it hits the bottom: 
if (Number((y-ball_width))<=Number(top)) { 
y = Number(top)+Number(ball_width); 
velocity = -velocity* friction; 


} 
velocity = Number(velocity)+Number(gravity); 
Increment the position of the ball on the screen: 
y = Number(y)+Number((velocity/8)); 
setProperty (“_root.ball”, _y, y); 
} 


© With the main bulk of the code in place, the 
next step is to call the code into the main loop 
on the timeline. Do this using a ‘call’ function on 
frame two of the main timeline. 

call(‘main_code’); 


Tremt Mody Test Cord Windom. rt 
Osa sear. 


6 Now you need to create the loop in the main 
timeline using a ‘goto’ statement. 
GotoAndPlay(2); 


Part 5: Testing the movie 


Time for a test run 


De-bugging 

Flash includes an built-in 
debugger to use in your movie. 
However, a quick check to make 
sure the correct values are being 
obtained for your variables is to 
include a ‘trace’ command in your 
code. When you test the movie, 
the results will be displayed in 
the output window. 


@ The last element to add to the movie is a 
dynamic text field that visually outputs the 
amount of gravity applied to the object ball. The 
text field can be placed anywhere and must be 
given the variable name ‘_root.gravity’. This points 
to your declared variable ‘gravity’ in the timeline. 


& Test the movie by pressing Ctrl/Command 
+Enter. The ball drops from around the centre 
of the screen and bounces until it comes to a halt at 
the bottom. Notice how the shadow adjusts its size 
depending on the height of the ball. 


You should now be able to alter the amount of 
gravitational force applied by dragging the 
slider bar on the stage. As the gravitational pull 
enters a minus value, the ball is attracted to the top 
of the stage. We've spiced up the scene using a 
picture of the moon's surface. FEES 
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1, OnDigital Idents - Pesky’s major 
contribution to the growing body of 
broadcast work produced in Flash. “We 
proved it was possible to create quality 
2D animation for TV using Flash to 
deliver 80 idents for OnDigital,” 
confirms David, “employing a highly 
spontaneous production technique 
that often enabled us to write, design 
and animate, from script to screen, in 
two or three days.” 


2. Budget Bunny, otherwise known as 
Gobu, the Budget Care Rental mascot: 
“This was a nice job because it enabled 
us to flex our character muscles. 

It proved that we could satisfy a 
serious corporate brief but still 

imbue the thing with humour.” 


Pesky 


“We're not techies, so we just enjoy making things that would 
amuse us if we came across them on the Web or on TV,” 


say comedy animators Pesku... 


he bastard child of Brighton-based games 
firm, Epic Multimedia and enthusiastic 
multimedia offshoot, Scratch ’n’ Sniff, 

| kicked and screamed its way into the world 
in 1997 Its aim was to innovate low-budget interactive 
entertainment for non-gamers. With an old-school 
love of 2D animation, and a lecture or two in the thrills 


and trivialities of Flash, Pesky is a fly you cannot swat... 


From the start, Pesky has been a tight-knit team. 
Co-founders are David Hodgson, Creative Director 
(“words, not pictures”), owner of an MSc in Interface 
Design, and Claire Underwood, Animation Director 
(“pictures, not words”), who has a BA in Animation. 


David explains: “It’s just us and our Kev, Pesky’s one 
other full-time animator, but we are fortunate enough 
to be able to call upon some excellent talent to work 
on specific commissions. 

“We are also lucky enough to work with some very 
good writers who share our wavelength, such as The 
Pox, creators of cult Internet hit The Pygmy Shrew. 
Pesky has a very strong in-house style — this is our 
voice, and in true cartoon comedy tradition, it's quite a 
silly voice (but silly is the new cool). 

‘Innovative and immediate animation for all’ is the 
loose motto and daily mindset, as David 
contextualises: “Were not techies — so we just enjoy > 


If it wasn't for... 


Dexter's Laboratory 

Cartoon Network, 

dir: Genndy Tartakovsky 

“This site has got some fantastic 


design and striking animation.” 


The Simpsons 
“It's become a cliché to say it, but it 


is simply the best.” 


Habbo Hotel 

[w] www.habbo.com 

“The most addictive use of the 
Internet that we know of (as 
calculated by the most working 


hours lost to it per week).” 
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“Crime Crackers has been developed 
as an online Web show and a 
television production" 


Crime Crackers provides young viewers with the opportunity to 
solve crimes. The colourful characters, all former circus 
performers, include Jerry the clown detective, his canine 
sidekick Chuckles, who is the true detective genius, Gundimar 
the human cannonball, Myrna the bearded lady, and Stretcho 
the rubber band man. The baddies include mime artist Gobbo 


who masterminds much of the crime, and Bolzoni the ring master. 


“Children can identify with Jerry, who is like all the Marx 
Brothers rolled into one, and who is always at the centre of 
mayhem,” Hodgson says. “Strands of the storylines are open 
ended so that youngsters can challenge the evidence and decide 
who they think was responsible for the crime.” 

Hodgson, who has a Master's Degree in child psychology 
under his belt, first met animator Claire Underwood when both 
were working on various CD-I and CD-ROM projects for Epic 
Interactive Media. “We worked on CyberPest, an interactive 
cartoon pet, and started coming up with other funky off-the-wall 
ideas for interactive entertainment. Eventually we decided to 
start our own company Pesky. We liked the cheekiness of the 
name, although we almost went back to our old day jobs when it 
initially proved to be difficult finding co-production partners.” 


making things that would amuse us if we came across 
them on the Web or on TV. We want to innovate but not 
for its own sake. The biggest challenge in interactive 
entertainment has to be coming up with stuff that 
makes sense and appeals to the mass market.” 

There's an understated sophistication behind 
Pesky’s images that leaves you feeling as though 
you've seen the work before, but never clocked the 
creatives behind it... well now you have. 

Pages in Computer Arts are stardom to some folk, 
but what does Pesky look for next? “To invent some 
memorable cartoon worlds full of original ideas and 
very funny animation, that people can not only watch 
but also, literally, really get into.” 

The Pesky hardware set-up is straightforward 
enough, though it may surprise one or two outsiders: 
“PCs only!” as David confirms. “All our designers and 
animators work on Wacom graphics tablets. | can't 
understand how you can use a mouse to draw.” 

The software selection doesn't need much 
pin-pointing either. The fact that this is a Computer 
Arts Flash Special may give the game away somewhat, 
but Flash, along with Photoshop for image-tweaking, 
and Speed Razor (with Matrox DigiSuite) is 
undoubtedly where these guys specialise. So go on 
David, what's Pesky’s story? 

“Flash 5is in many ways a backward step for the 
animator (although we understand it’s great for the 
coders). Its handling of colour, for example, is really 
arse-about-face now.” Ooh, testy! “For this reason we 
use Flash 4 for all our design and production, and only 
convert to Flash 5 at the very last moment (this is 
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usually necessary if we're doing something clever with 
ActionScripting). We are surprised that Macromedia 
has failed to take into account the needs of its growing 
constituency of animators in this recent upgrade.” 

He is not backing off... “It seriously jeopardises their 
chances of winning the bigger TV production contracts. 
Having said that, we will probably continue to use it 
because it is still so cheap compared to other 
animation packages, and even then, most of these 
don't cater for the original animation drawing: they still 
assume you work on paper and scan in.” 

Pesky has a strictly digital-only, straight-to-screen 
production method. “Claire has been working with 
Flash since 1997, when it was known as FutureSplash 
Animator, before Macromedia bought it up. She has a 
very specific way of working with Flash, which requires 
a new way of thinking for the traditionally trained 
animators we bring in. This is because to take full 
advantage of Flash’s ability to streamline productions 
and reduce file sizes for the Internet, you need to 
understand how to efficiently re-use library elements. 

“We use Flash as a production tool and know our 
own limits — when the going gets tough, we can call 
on some excellent ActionScript programmers to do 
the serious coding. We are very proud of saying that 
we employ very skilled and highly creative, trained 
animators, because we see ourselves first and 
foremost as an animation studio, nota computer 
graphics company.” GEES 


1.“BBC Online - our favourite 
clients! Over the last two years 
we've delivered various 
interactive cartoons that have 
caricatured Radio 2 DJs: 
Wogan, Ross, Walker, and 
Wright; as well as animated 
funnies for EastEnders and the 
WebWise campaign. But our 
favourite is probably the Back 
Pain campaign — it was a 
chance for us to design and 
animate in a different style.” 


2. Radio 2 Online [w] www. 
bbc.co.uk/radio2/folk/ 
acoustic_club/launch.shtml. 
David explains why this unlikely 
URL chills the spine: “We're 
particularly proud of this one 
because it works so well as an 
interactive idea, and it doesn't 
simply rely on comedy (our 
usual staple). The Folk Virtual 
Session lets users play along 
with the jigs and reels while 
being able to stop and start the 
tracks and read the sheet music 
on screen. It's a simple concept 
that shows how the Internet can 
be so much better than any 
other medium for specific 
things, as long as you design it 
with those people in mind. 
Build it and they will come.” 
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Using templates 
in Generator 


Modify sounds, graphics, Flash symbols and 
tables dynamically, even in finished output files 


A lash is undoubtedly one of the 
defining technologies of 
F immersive Internet content, but 
5 i after creating the perfect .swf 
file for Web content, you always have to 
face the reality that you can't modify the 
‘swf toast without digging deep into the fla 
bread. Generatorremedies this by making 
it possible to modify sounds, graphics, 
Flash symbols and tables dynamically, 
even in finished output files. 
It does this by using templates with 
placeholders for the elements which you 
may need to replace ona regular basis, 
saving you the hassle of having to 
constantly change your Flash file, 


republish and upload. We take you 
through setting up the Generatorserver, 
and creating templates with customised 
elements. Your Web content should soon 
be as interactive as some of the best and 
most complex Flash sites on the Internet. > 


I\ Expertise provided by Mark Towse 
=] [e] mark@bigimpact.tv. 


“*\\ Files on disc 

Tutorial files are on the cover CDin the 
Dual\Tutorial\Generator folder. Generator 2 
Developer Edition costs £799, or download a 
30 day trial from [w] www.macromedia.com 


Wustration: Thomas Brodaht [e) surf@surf.lu [w] www surfstation.lu [wlwww.xtrapop.com 
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Tell Target 


There is a clever work around for 
non-Generator users who wish to 
be able to update dynamic Flash 
content without the large outlay 
for Generator. Use the ‘tell target’ 
action to access external 
graphics, symbols and Flash 
movies so that instead of 
modifying all the elements of an 
existing large fla file, you only 
need modify the external content 
the .swf movie is sourcing. 


©1995-2004 Macrame Ine Acoma sind 
penetbbona poet o> 


1 It is unlikely that you have a copy of Generator 


just floating around, because of its expensive 
nature. A downloadable, free 30-day trial of 
Generator, Developer Edition is available from 
[w] www.macromedia.com, to suit your platform. 


Part 1: Downloading Generator 
Take a trip to [w] www.macromedia.com 


ne ; 
a a anna enn 


io onder 1 sta the 30: Ap wnt Generator Widows 
Server, you wk sted i use he fellow pallor: specsc 
snad camber 


(nade: the Wardowy aduureg exerts) 


To wreak the Geers Solaris or Lies mal saree 
pease © mad Macroenecea lotta ceil camber at 


7 yoo do aot have Macrocsecha Pah, please download 
the nu wowca Sun 


Upon installation, you will be prompted for a 

serial number. Don't despair, Generator 
requires a platform-specific serial number for 
configuration. This will have been sent to you in 
your confirmation e-mail, so don't just delete it as 
you might other demo emails! 


Reboot your computer. You have successfully 

installed Generator and those incredibly useful 
Generator templates, objects and Generator 
Publishing Options have been installed into your 
copy of Flash 4 or Flash 5, Create a folder called ‘CA 
Special Generator’, and inside this, create a folder 
called data and a folder called .swf. 


Part 2: Dynamic magazine building blocks 


Creating an alternative to HTML or an .ASP database site 
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ay Standard Flash sites are great, but almost every 
site on the Internet which has regular updated 

content, such as a magazine site, is boring old 

HTML, or else a brain-bendingly complex .ASP 

database site. Open Flash and create a blank movie. 


4 | Now for a little eye candy to create a nice 
background for our updateable Flash 
Magazine. Set the movie background to a light 
pastel blue (Modify>Movie). On the background 
layer, draw a box with a slightly lighter blue than the 
background, and a line colour the same as the 
buttons. When dragging the box, use the down 
cursor to round the corners (one trick you won't find 
printed in the manual). 


Insert a new symbol by going to Insert>Insert 

New Symbol (or Ctrl-F8), click the button radio 
box and name it basic button. Create a nice button 
shape in the Up state, copy the frame into the Over, 
Down and Hit frames, making the Over and Down 
buttons progressively darker in colour. Leave the Hit 
state as itis. 


Create a new layer called header and select 

the Text tool. Select Arial and 24 point text, 
coloured black. In the text box, type {varTitle}. 
Make sure you use pinched brackets, or Generator 
won't be able to replace the variable. 


Sis Siathee 


Ey Return to the scene, and click Control/ 

Command +L to bring up the library, which 
contains the button you have just created. Drag five 
instances of the button onto the page, on five 
different layers. Name the layer buttons 1, 2, 3 and 
so on, and create a new layer called background. 
Drag this underneath the buttons layer. 


Create a new layer, called button variables. 

Type {varBut1} over the first blue button, and 
continue for the rest of the buttons, renaming the 
variable {varBut2} and so on. Use kerning to 
increase or decrease the distance between text 
layers so it lines up to the buttons perfectly. 


Object 
placeholders 


Practice creating Generator 
templates by using a .fla you 
already have prepared and 
replacing symbols, graphics and 
sounds with their Generator 
Object placeholders. The benefit 
of this is that new buttons, 
symbols and sounds appear 
instantly in your Generator 
template, enabling you to see 
changes in seconds which 
would otherwise take hours or 
even days. 


Ee 

Change the frame rate to 24 (click in the 
circled box), and create frames up to 20 for 

each of the layers. On the button names layer, 

right-click the timeline and select Create Motion 

Tween. Add a keyframe at frame 15: right-click and 

select Add Keyframe, or press F6. 


ay Drag the first frame of the layer header to 
frame 10. Create a motion tween and add a 

keyframe at frame 25. At the frame 10 keyframe, 

move the {varTitle} object up, off the screen. 


PA 
= 


Create a new layer called content and at frame 

50 add a text box to the content region. Make 
the text black, Arial and 12 point but drag the small 
round circle on the text box out to the edge of the 
content region. The circle becomes a square. This 
has provided an edge boundary for our content, so 
it won't just continue ad infinitum off the screen. In 
the text box type {varContent}. 


8 | Using the Transform palette, scale horizontally 
to 1 per cent. Select the first keyframe and 
using the Effects palette, select Alpha and reduce to 
O. Drag the button names layer along the timeline 
so the last keyframe is at frame 50. Add frames for 
the other layers to match this. 


Ty Create a motion tween on the five button 

layers, and add a keyframe again at the 15th 
frame. Rotate the buttons through 180 degrees at 
the first keyframe and move them to the middle of 
the screen, to the same location, but still 
horizontally aligned. You can use the Shift key to 
lock the direction. Fade the Alpha to Zero at 
keyframe 0. Drag the layer to frame 20. 


Open the Scene palette and duplicate the 
scene once. 


We 

oO Create a motion tween for the background 
layer and add a keyframe at frame 15. At 

keyframe 0 use the Effects palette, select Alpha and 

set to Zero. 


Add a new layer, called behaviours. 

Double-click on the first frame to open the 
ActionScript options. Drag the Stop command to 
the central box and click OK. Drag the frame 
containing the little squiggle (which represents the 
action we just created) to frame 50. 


2 3 E eu ye ee ee 

Add a keyframe at the end of each of the layers 
and delete all the frames before. Now 

duplicate this new scene, three more times. Name 

each scene 1 through 5.> 
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Part 3: Time to generate! 


We are going to set values in a text file which Generator uses to 


insert button labels, scene links and content 


SQL 


Generatoris at its most powerful 
when combined with SQL, which 
sources content from a full 
created database ratherthana 
comma delimited text file. SQL 
(Structured Query Language) is a 
standard set of rules which 
govern simple filter logic for all 
but the highest end databases 
(such as Sybase and Oracle). 


Open a basic text editor like Simpletext or 
Notepad. We are going to set values in a text 


file which Generator uses to insert button labels, 
scene links and content for each of the sections. This 
enables you to update content in a text file, which 
directly reflects content in the final .swf output. 


4 You can browse through to the text file just 
saved, but this gives you an absolute path, 
which is a pain when you try to distribute your 
templates over the Internet at a later date. It is 


better to use a relative path: ../data/variables.txt is 
the best option. 


Still in standard Flash, give yourself an F12 

preview — all of a sudden, your variables from 
the text file jump to your Flash .swf file, via the 
-swt Generator template. But isn't something 
wrong here? 
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In Notepad, type the following and save the 
file variables. txt, in a folder called data. 


Name, value 

varTitle, CAS FlashMag 
varBut1, Welcome 
varBut2, Lifestyle 
varBut3, What's New 
varBut4, Links 

varBut5, Contact Us 


Save your Flash movie in the ‘swf' folder 
created at the start of the tutorial. Still in 
Flash, click on the small Generator logo in the top 
right-hand corner of the screen. You are presented 
with the Set Environment dialog box. 


varContent1, Add your welcome content text here! 
Make sure that there is a comma after each varButX. 


Click File>Publish Settings. Generator has 

separate Publish Options to Flash, so even if 
you have 24fps set and various other options, 
Generator defaults to the settings here, which is 
why we're going to change them. 


Go Set your framerate to 24. If you want to use 
any fonts which may not be on a viewer's 
system, you can embed them here by checking the 
Font Outline checkbox. Click Publish. Nothing 
appears to have happened, but don't worry... 


8 | In step 16, we set a limit for the width of the 
main page content. What we need to do to 
tidy up our title and the buttons is to expand the 
text field by opening up the relevant tween and 
dragging the small circle in the text box out about 
50 per cent more, so that the text isn't cropped onto 
anew line. 


Do the same for the title and give your page a 
preview. Things now look much better. We are 
now going to add dynamic content to the different 
scenes with different updateable content from 
within our variables.txt file. 


Web resources 


Unlike for Flash, there aren't 
many resources on the Internet 
(or even in books) for learning the 
requisite basics. One site which 
does, however, is the excellent 
[Ww] www.flashgen.com which has 
tutorials from the likes of top 
design house Spooky and the 
Bandit. The site covers many of 
the topics discussed here, as 
well as more advanced ways to 
modify variables, and also links 
Generator with ASP 


artitie, CAS FlashMag 


arButt, Welcone 
arBut2, Lifestyle 
arBut3, What's New 
arButs, Links 
arButs, Contact Us 


warContent, Add your welcome content heret 


arScene, 1 


arScene, 5 


10 Open the variables.txt file and add the 
following text at the end: 

VarContent2, Add your lifestyle content text here! 
VarContent3, Add your what's new content text 
here! 

VarContent4, Add your links content text here! 
VarContent5, Add your contact us content text here! 


o Back in Flash, double-click on the group of 
other four scenes, and add the relevant 
variables. You should be able to work out which 
ones they are from the above step. 


— 

14] Re-enter your variables.txt template and copy 
multiple lines of text for each of the content 

variables. This enables you to see how the width 

boundary works. After you have done this, shrink 

the text box boundaries slightly, to enable us to add 

some dynamic images. 


Perform the same action for the other four 

buttons, giving you a complete interactive site 
structure. Test that they all work correctly by 
previewing and clicking the buttons. 


SPN 


From the cover CD, copy the two 
gen_pic_1.jpg and gen_pic_2.jpg files into the 
Generator folder which houses your data and swt 
folders. You can add any images you want in here, 
these are examples to demonstrate technique. 


16 | Drag the Insert JPEG File Generator Object to 
the far right-hand side of the content area. We 
are going to use this image placeholder to display 
images, and enable you to change images as you 
wish, without the rigmarole of editing -fla files. 


In the first scene, double-click the grouped 

buttons to open up their editable tween. 
Right-click on each of the buttons and add the 
‘goto’ and the relevant scene number. 


15 In the Window menu, select Generator 
Objects. This is a list of the objects Generator 
can create and update on the fly from comma 
delimited text files or from dynamic content systems 
created using SQL or other database languages. 


o Click on the placeholder for the JPEG images 
and in the text input, type the following: 
../gen_pic_1.jpg. This enables you to modify the 
name of the image file in the data folder. Test this by 
previewing, then swap the two names of the 
images, which in turn swaps the image Generator 
pulls up in the template. > 
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Part 3 Time to generate! continued... 


Generator back-end 


Some of the highest profile Flash 
sites on the Internet have been 
created using Generator, 


including the groundbreaking 
[w] wwwtedbaker.com and 

[w] www.charlottestreet.com. 
These companies want the high 
impact presentation that Flash 
offers, but the Generator-driven 
back-end enables constant 
news, features and product 


updates without time and cost 5 : : Tae Bs 
restraints which would occur if 19} Go to the other scenes and add different place Coo ) 
fla files had to be updated daily. holders. Because each placeholder can link to a Now we are going to use Generator's chart 


handling functions. These provide some great 
ways to update statistics visually, without having to 
draw loads of bars or do updates as figures change. 
Select one of your sections and at the bottom of the 
content region, drag a PieChart Generator Object. 


different named JPEG file, you can add a different 
file name to each of the placeholders and change 
the image name in the folders so that each section 
can pull up different images. These can then be 
changed as easily as you'd modify a file name. 


In the text file, add the following values — and 
make sure you add the hash sign, otherwise 
you won't get any colour. All of these values can be 
changed for other hexadecimal colours and values: 
just be sure all the values add up to 100 per cent. 


=i 


We now set the other parameters. Thankfully, 
you don't need to type a mass of parameters 


value, color 

22, #993333 

34, #6699cc into a text file, there are simple dropdown boxes. 
34, #cc0033 Expand the Generator dialog so that you can see the 
10, #3300ff 


options and change Border to False, and Depth to 


Save the file and re-enter Flash. 200. Value Display should be Rollover. 


Add a different type of chart to the other 

scenes to see the differences in the variety of 
ways you can display data. The best way to use 
Generator's data display features is to use a full 
database hooked up to ASP pages, rather than 
using a text file as your data source. This way, you 
can type in values, click a button and see the results 
instantly displayed in your swt template. 


Go to File>Publish Settings for one final check 
of the Publish Options. Click Publish to finalise 
everything and exit Flash. 
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Py Double-click on the PieChart placeholder and 
in the dialog that comes up, enter a path to a 
new text file we need to create: 
../data/piechart_variables.txt. Open your text editor 
after you have done this. 


Papeaaac LETS, 


Ona different scene, perform the same actions 
for the basic charts. Select BarChart, although 
you can experiment with the types depending on 
how you want various dynamic statistics to look. 
Make the same data reference to the 
piechart_values.txt and keep the standard settings. 


Double-click the created swf file, which is 

referencing the Generator template we have 
created. You now have an interactive site with 
content you can amend by typing into a text file, 
images you can swap by changing a file name and 
you can display data in a massive variety of formats 
by modifying the same text templates, without ever 
editing a standard Flash file. How cool is that? FEES 
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[Flash] 


Whether you're updating your portfolio or experimenting with interactivity, Computer Arts 
Specials points you to some of the best Flash-orientated and driven sites on the Web... 


Action Scripts 

[w] www.actionscripts.org 

A handy site to visit if you’re keen on exploring Flash’s 
inner clockwork: over 100 downloadable open source 
files lie in wait to mess with your head. The tutorials 
cover topics such as Flash detection scripts, video to 
vector conversion and the ins and outs of tsunami 
building forthe more dedicated disciple. 


Artificial Environments 

[w] www.ae-shorts.com 

Shorts are often used by design agencies as breeding 
grounds for new ideas, which is the exact scenario 
with Londons Artificial Environments site. Expect 
plenty of interactivity and motion graphics, as well 

as some impressive interface work and an elegant 
look and feel. 


Computer Arts Flash Studio 

[w] www.computerarts.co.uk/flash 

If you're looking to expand your Flash knowledge 
there's simply no better place to visit than our very own 
Flash Studio. It’s full of expert tutorials, with a gaggle 
of free downloads, and profiles of some of the finest 
Flash artists out there - so what are you waiting for? 


Devlab 3D 

[w] devlab.swift3d.com/ 

If you've ever needed convincing about the potential of 
vector-based 3D graphics on the Web, visit the Devlab 


You'll find some of the best lip-synching on the Web, at 
[w] www.renegadecartoons.com. 


fora dose of medicine courtesy of Electric Rain's Swift 
3D, a 3D vector exporter for Flash and LiveMotion. 
Powerful, cinematic design and technical wizardry 
combine to give Flash serious 3D credentials. 


Electrotank 

[w] www.electrotank.com 

This recently opened online games site offers a range 
of heavily-ActionScripted Flash games. Topping the 
list is the highly playable and addictive Minigolf. Add 
to this a multiuser server in which you can challenge 
players from across the globe and you have one of the 
stickiest sites seen ina long time. 


Flash Challenge 

[w] www.flashchallenge.com 

Arenowned cutting-edge Flash showcase site that 
pits ten sites against each other and analyses them 
by categories such as interface, aesthetics 

and optimisation. There's constructive feedback 

on offer from its style-conscious community — a 
good place to head if you’re in need of divine 
design inspiration. 


Flash Guru 

[w] www. flashguru.co.uk 

Fora bit of inside info, you might want to scroll through 
the interview section of Flash Guru, where designers 
give the lowdown on their masterpieces. Alternatively, 
there's an impressive links section which offers a more 


Don't be fooled by the simple concept — the robot antics at 
[w] www.zanpo.com are completely addictive. 


rounded view of the Flash world, or you could check 
out the Focus category for a look at the implications of 
the latest Flash design developments. 


Flash Kit 


[w] www.flashkit.com 

Just as Computer Arts Specials brings you up to the 
minute Flash news and exciting tutorials, Flash Kit 
provides an excellent resource for any Flash expert. An 
abundance of sample code, tied in with heaps of 
experimental Flash movies and buttons (all available 
for download) make this possibly the most bulging 
Flash-orientated site on the Web. 


Ichirou 

[w] www.|Ichirou.org 

Experimental Flash animation and interaction is 
the order of the day at Ichirou. An original and 
intriguing site, its simplistic design bears no 
resemblance to the hours of coding that must have 
gone into each movie. Worth a look, even if it’s just 
for the ‘wow’ factor. 


Macromedia 

[w] www.macromedia.com 

Enrol in the online Flash Uni, check the support 
section for useful Q&A info and get down to the nuts 
and bolts of design with the ‘developer showcase’ 
section. The Site of the Day is still one of the most 
coveted accolades on the Web. 


Vincent Marconi’s My Pet Skeleton site is a lesson in 
interactivity, mixing creepy audio with stunning visuals. 
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[w] www.macromedia.com's Site of the Day is still one of the 
most coveted accolades on the Web. 


My Pet Skeleton 


[w] www.mypetskeleton.com 

Flashis a great tool for creating online portfolios, and 
Vincent Marconi’s at [w] www.mypetskeleton.com is 
one of the best we've seen. Mixing creepy audio with 
some truly stunning visuals, this site is a great lesson 
for any illustrators wanting to add interactive elements 
to their work. 


Praystation 

[w] www. praystation.com 

Joshua Davis presents a research and development 
Website with a mix of instructive and enigmatic 
projects, often spanning an entire month with a step 
each day. A sliding, calendar-style nav bar showcases 
all manner of Flash oddities and keeps you up-to-date 
on developer conferences and events of interest to the 
budding multimedia designer. 


Renegade Cartoons 

[w] www.renegadecartoons.com 

The Web is well and truly awash with Flash-based 
cartoons. Not many are quite as well-produced and 
entertaining as those at Renegade Cartoons’ 
enthralling Flash paradise. If you're looking to make a 
character-based Flash animation, take a peek here to 
see some of the best Flash lip-synching around. 


FLASH KIT 


Kit- A Flash 


[w] www.flashkit.com boasts an abundance of sample code, 
experimental Flash movies and buttons. 
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Dip into over 100 downloadable open source files at 
[w] www.actionscripts.org and discover what makes Flash tick. 


Supermodified 

[w] www.amontobin.com/index2.html 

Amon Tobin's Website is much less gimmicky than 
others of this ilk. Apart from providing key-operated 
loops and samples straight from the source, the site is 
also a futuristic riot of typographic Flash trickery that 
complements the Brazilian musician's hectic and 
eclectic leanings perfectly. 


Small Blue Printer 

[w] www.smallblueprinter.com 

Astroke of genius, this site, built entirely in Flash, 
enables the user to create their perfect house floor 
plan. Design in 2D and then when you're happy, take a 
stroll around using the interactive walkthrough. Not 
one for everyone, but nevertheless a great example of 
how Flash can be applied to almost anything. 


Titoonic 

[w] www.titoonic.dk 

Flash 5 introduced a whole new set of tools and 
coding commands to the Flash animator and games 
designer - and there's no better place to see these 
in action than at [w] www.titoonic.dk. Some great 
character animation coupled with a completely 
compelling and playable spider game make this one 
sticky site. 
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The simplistic animation at [w] www.Ichirou.org belies the hours 


of coding behind each movie. 


A multiuser server and addictive Actionscripted Flash games, 
make Electrotank one sticky site. 


Uncontrol 

[w] www.uncontrol.com 

Spooky vector life forms crawl across the face of 
Uncontrol, a Web experiment designed to express 
themes of anthropomorphism and kinetics using 
simple shapes. You'll undoubtedly be familiar with this 
kind of scripting, but the butterfly wing colour 
schemes, insectoid creations and Spirograph-like 
sketch tools add resonance and character to the genre. 


WDDG 

[w] www.wddg.com 

A portfolio with a difference, the ‘super video pimps’ 

at World Domination Design Group (WDDG) manage to 
be both brash and understated at the same time. 

A portfolio of past Flash projects will appeal to 
corporate and design-minded viewers. Speedy 
downloads and an extremely slick interface 

complete the picture. 


Zanpo! 

[w] www.zanpo.com 

Zanpo! is a Flash-based multiuser game in which you 
guide the eponymous robot around a city, chatting to 
other users and picking up goodies. It doesn't sound 
like much, but is completely addictive and once again 
proves the sheer versatility of Macromedia's killer app. 
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Get the inside track on Macromedia's Web 
graphics package. = 
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Expert tutorials, free downloads, profiles of leading artists, all 
at [w] www.computerarts.co.uk/flash. 
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Getting started 


A idee a to Flash 5 for Windows 


‘71 
ms a ivided into 12 chapters that 


symbols and sound and interactivity 


eee | 


Brain Salter. & Naomi 
Langford-Wood 


D take you from how to install 
Flash 5 on your PC to how to 
publish movies, this is the 

perfect beginners’ guide. New to the 
Simple Guide series, this compact 
book reveals the power of Flash a step 
ata time. After taking a close look at 
how Flash movies are constructed 


Prentice Hall within the Flash environment, the 
oT iE authors illustrate how to use drawing 
| ISBN or 
I sicnntssbtdiosaiosentepipnssiipemnsntaahataensiasineest and painting tools as well as how to 
0130610313 import images from other programs. 


Later chapters cover the use of layers, 


within your animations. The manual 
concludes with the all-important 
chapter on delivering new animations 
to your audience with clear and concise 
information on the variety of file 
formats open to the designer such as 
animated GIF, AVI or QuickTime. 

The manual is an excellent primer 
for anyone just starting with Flash. The 
book is let down, however, by blurry 
screenshots. The text accompanying 
them is jargon-free and explains in 
plain English the technique under 


discussion, but crisper screenshots 
would have made this manual much 
better to use. As it stands, this is one of 
the best beginners’ guides to Flash 5 
currently available and easily 
affordable at this price. 


Verdict 


SI 


Easy reference 


Flash 5 in easy steps 


| Price ~~ Z lor f you are an absolute 
£9.99 beginner with Flash 5 looking 
iaptiateace ate ao for your first easy-to-use 
Author manual, then you've found it! 
~ Ni ck Va Vand dome in (RS All the essential knowledge you need 
is contained in this slim volume. A new 
[1 Publisher Tae iat addition to the /n Easy Step range, each 
en of Flash 5's features comes under the 
‘Computer Step spotlight in step-by-step tutorials. 
oe This isn't a project-based beginners’ 
[ISB N Sch NS manual, but a reference for each of 
1840781 > as Flash 5's features, covering how to 
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create objects, using colour and text, 
frames and layers, and concluding 
with how to test and publish your 
Flash animation. 

Even though the entire book is 
presented in black and white, each 
screenshot is crisp and clear and 
excellently supports the numbered 
steps of each chapter, offering a quick 
and easy route to Flash expertise. 


Verdict 


SEDI 


Data-driven 


Generator/Flash Web Development 


‘Authors ee “| 
Richard Alvarez, Jason 
Taylor, Matthew Groch 


[ Publisher 


1 
BSS a ee 
New Riders Publishing 


ISBN ; | 
0735710805 
iSece, Ree TORE, 
ce e cry "Roe, 
= 


&) 


his is the first book on 
Generator to become 
available. With its CD 
packed with code and 
Gonnetior illustrations, any developer 
can quickly get to grips with the 
software. If you have to handle the 
data-driven site design, but still want 
to maintain an interactive look and feel 
to your site, this manual shows how. 

If you are an accomplished Flash 
developer, Generator enables you to 
build information taken from a 
database into your designs. The key to 
Generatoras illustrated here, is that it 
offers the Web developer an off-line 
environment in which to work. Written 
ina very accessible style, this is your 
guide to an efficient workflow that 
enables you to maintain a dynamic, 
data-rich Website with the minimum of 
daily maintenance. 


Verdict 


SH 


Made to measure 


SAMS Flash site workshop (book/CD package) 


Lo} 


£36.50 


f you are a Flash developer 
‘ha and don't want to reinvent the 
i / wheel each time you build a 
! new e-commerce enabled 
Website, this book is for you. 


Ken Milburn ; 
Presented here are prefabricated 
Publisher Flash movies that can be seamlessly 


integrated to build a professional 
Website in no time. The accompanying 
CD contains all the code you need to 
construct a fully functional Flash 
interface. This isn't a Flash manual for 
the beginner or intermediate user. 
Aimed at developers only, you'll need at 
least a passing understanding of 
ActionScripting, but not a 
comprehensive knowledge. 

Beginning with the basics, you first 
set-up sniffer to detect your visitor’s 
Flash plug-in version. You are then 
moved on to organising your home 
page navigation, before diving into the 


Sams Publishing 


[ISBN 


0672319993 


heart of your Website. Tutorials include 
building a shopping cart, services 
catalogue and a message board and 
concludes with advice on publishing 
your Website. 

Each chapter is clearly laid out with 
full-colour crisp screenshots. At each 
step, the appropriate dialog box is 
shown so you know how to customise 
elements to your exact needs. Chapter 
6 is of particular interest because it 
illustrates how Flash can be used to 
create a dynamic and interactive 
shopping experience through a Flash 
animated shopping cart. 

If you look longingly at other 
online stores that use Flash and wish 
that yours could as well, this manual 
shows you how to do this, and also 
provides you with royalty-free 
components to create your own unique 
Flash enabled Website. 


Verdict 


CSESESUStS 


Real-time movies 


Flash 5 virtual classroom 

[ Price ai iS See | 
£29.99 } 

Author ahi Sion | | 


ike the recent HOT guides, 
this manual uses a 
combination of bold 

‘el graphics coupled with 
easy-to-follow steps with an 


Dong Sahlin accompanying CD containing 
[Publishers real-time movies of the author 
speaking directly to his readers. If you 
McGraw-Hill like a one-to-one relationship with a 
tutor then this book offers exactly that. 
ISBN This virtual classroom is ideal for 
0072131152 anyone new to Flash who doesn't need 


to learn every aspect of its operation. If 
you want to add dynamic elements to 
your existing static Web pages, this is 
the place to learn how. The author 
presents his tutorials in a light, 
humorous tone and you can play 
them through as many times as you 
like until you understand the concepts. 
The printed book contains clear 
screenshots illustrating each step. It’s 
an innovative means of teaching that 
will continue to find its way into more 
and more software manuals. 


Verdict 


SIDI 


ActionScripting 


Macromedia Flash 5 ActionScript for Fun and Games 


| Price | 


£32.99 


Gary Rosenzweig 


Publisher 


Que 


ISBN 


078972524X 


any users’ first experience 
( of Flash is via online 

games that seem to be 
\ becoming an art form in 
their own right. With this in mind, this 
manual teaches Flash design in an 
innovative way via the creation of 
original games, from puzzles to aim 
and shoot games. 

You need a basic understanding of 
ActionScripting because this is really 
what the book teaches. 17 chapters 
cover the basics of scripting foreach 
of the games under development. 
Each teaches a fundamental skill which 
you can adapt to your own games or 
Flash interfaces. 

Worked examples illustrate 
each step of the coding process, 
with hints and tips along the way. 
There isn't an accompanying CD, but a 
companion site where the coded 
examples can be customised to your 
needs. Learning ActionScript can't be 
more fun than this. > 


Verdict 


SIS 
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Learning curve 


How To Do Everything With Flash 5 


£17.99 


Bonnie Blake 


Publisher 


Osborne 


ISBN 


0072127147 


te 


rom the start, this manual 
takes onboard Flash 5’s new 
features. This book offers a 
| gentle learning curve forthe 
novice - the information is divided into 
four main sections, beginning with an 
overview of the main features and 
concluding with the ubiquitous 
ActionScripting chapter. 
Well-designed pages cover each of 
the key techniques. Screenshots are 
clear and well annotated. This isn'ta 
project-based manual but one that 
reveals all of the dialog boxes and 
directories you have to navigate to get 
the most from Flash 5. Part three is of 
particular interest because it looks 
closely at how to create yourfirst 
animation. Overall, a competent 
manual that offers beginners all the 
information needed to get started. 


Verdict 


SSK IESE 


Another level 


Advanced Flash 5 ActionScript In Action 


Price 
£27.99 


Author 
Dan Livingston 


Publisher 
Prentice Hall 


ISBN 
0130931276 


s its title suggests, this 
manual is for seasoned Flash 
professionals only. Packed 

‘ with source code that 
enables you to make ActionScript 
really dance, this dense manual offers 
advanced users the chance to push 
their skills to another plain. 

Each exercise is illustrated with a 
real-world Flash movie, also on the CD. 
You are asked to manipulate actual 
images from completed movies 
instead of primitive shapes as in other 
manuals, a move which offers a richer 
learning experience. 

Allthe essential Flash components 
are covered, including XML and an 
important chapter on troubleshooting 
ActionScript. This is a no-frills manual 
with one of the best hands-on teaching 
environments currently in print. 


Verdict 
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Flash in a day 


Teach Yourself Flash 5 in 24 Hours 


EAZO9 


Phillip Kerman 


Publisher 


SAMS 


ISBN 


067231892X 
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oncise and comprehensive, 
this is an excellent manual 


5 if F for any Flash beginner, 


offering an overview without 


being patronising or overwhelming. The 


book begins with the basics and 
concludes with advanced 
ActionScripting — you really can 
become a Flash designer in 24 hours. 

Divided into easily assimilated 
chapters, each feature is explained 
fully and illustrated where appropriate 
with a hands-on tutorial. 

Each chapter concludes with a 
summary of the work just covered and 
checks that you were paying attention 
with a Q&A section. 

Jargon is used but explained as you 
move through the text. Working at your 
own pace, each tutorial slowly builds 
on the previous one until you can 
handle the Flash interface and start to 
create your own original Flash movies. 


Verdict 


tte 


Server interaction 


Flash 5 Dynamic Content Studio 


Price 


£43.99 


Philippe Archontakis et al 


Friends of Ed 


ISBN 


1903450063 


f you are the type of designer 
who wants to make sure that 
your next masterpiece 

| doesn't end up being ignored 
by visitors to your Website as they click 
on the skip intro link, this book should 
be read cover-to-cover. 

Packed with advice and hard-won 
knowledge from some of the world’s 
most respected exponents of Flash 
design, this book concentrates on 
more than simple linear Flash movies. 
Its great strength is that it delves deep 
into your Website's server and 
illustrates how to use this powerful 
weapon in your armoury with detailed 
information on Generator, ASP. 
ColdFusion, CGI and Perl scripting. 

If your site is based on the Windows 
server, this book is a must-read, 
because it shows how client/server 
interaction is the next stage in Flash 
design evolution. 


Verdict 
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Flash 


Games and Animation Training 


Sprite Interactive has launched a range of training courses to teach yo 
create vibrant animations and exciting games using Macromedia Flash 
techniques not offered by conventional Flash courses. Every student get; 
packed CD-ROM of resourgaaaad routines that help build high impact ga 
and animations. 


We employ highly trained con 
of years, and have real, re 
profile clients, for exampl 


sultants who have worked in the industry fo 
lant experience of working on Flash project 
ey, Soccernet and Toni & Guy. 


Our courses are intended t you new ways of using and understandins 
environment, and to develop the confidence and understanding to go it 


Flash 5 Basics Course: Two day course 
In this cross-platform training, we will teach you the basics of Flash, giving 
level of understanding of the program that will allow you to begin explorin 
confidence, the many “es This also includes basic ActionScrip 


Flash 5 Animation Course: two day course ; 
We will teach you how to animate using Flash. You will learn the basics of chare 
animation, and then how to employ these techniques using Flash 5. : 


Flash 5 Games Course: Two day course : 
You will learn how to create games using Flash. The course is taught through 
development of example S, each game containing a number of key fe 
of general game development, such as making objects draggable, collision det 
and the use of layers. 


of the three days, have a broad overview of the Flash environment and how it can 
be used effectively for the development of games and animation. 
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The Training Centre, situated in Fetcham Park House, provides a fantastic environment, 
where tradition meets technology. Built in 1705, this Grade II listed mansion at 
Fetcham, near Leatherhead in Surrey, was designed by the architect William Talman 
and its landscaped grounds by “Capability” Brown. 


There are frequent rail services to London Waterloo (35 minutes) and London 
Victoria (40 minutes). See www.sprite.net for more details. 


The Training Centre is situated at: s 
Fetcham Park House, Lower Road, Fetcham, Surrey, KT22 9HD 
Phone: 01372 371212, Email: Training@sprite.net 
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